CODEWITHSUNDEEP
angular-ui-routerangular
angularUser
angularUser

Reputation: 239

Angular 2 Component routing

I am planning to start learning angular 2 component router.

I have used Angular ui-router heavily.All my projects uses UI-router complex features like nested states and nested named views.

What will be good start to use angular 2 component router?

how can I configure nested states in Angular 2 component router?

Upvotes: 2

Views: 1011

Answers (3)

Nicklesh Bisht
Nicklesh Bisht

Reputation: 41

@NgModule({
declarations: [AppComponent,CreateComponent,ListComponent],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
RouterModule.forRoot([
  {path:"",component:ListComponent},
  {path:"Create",component:CreateComponent},
  ])
],
bootstrap: [AppComponent]

})

Put this RouterModule in app.module file.

For this you have to import { RouterModule} ;

<router-outlet></router-outlet>

Put router-outlet element in app.component.html to render component through routing.

Upvotes: 0

harunur rashid
harunur rashid

Reputation: 43

You can define a app.routing.ts like below.

export const routes: Routes = [
    {
      path: '',
      component: SimpleLayoutComponent,
      data: {
         title: 'Login form'
      },
     children: [
         {
             path: '', component: LoginComponent,
         }
     ]
    },
    {
      path: 'dashboard',
      component: FullLayoutComponent,
      data: {
        title: 'Home'
      },
      children: [
         {
             path: '',
             component: 'mycomponent'
         }
       ]
     }
];

Then import this class to your app.module.ts file like below.

 import { AppRoutingModule }             from './app.routing';
 @NgModule({
 imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    AppRoutingModule,
 ],
 declarations: [
    AppComponent,
    LoginComponent
 ],
 providers: [
 UserService, AuthGuard],
 bootstrap: [ AppComponent ]
 })
export class AppModule { }

app.component.ts Below: views get injected in 

import { Component } from '@angular/core';

@Component({
    selector: 'body',
    template: '<router-outlet></router-outlet>'
 })
export class AppComponent { }

Upvotes: 1

Criddles
Criddles

Reputation: 45

All in all i would say routing is pretty simple and intuitive in angular 2

I would suggest reading through the router docs to get all the basics.

Keep in mind that child components can have routes too. They build from its parents routes.

app.component.ts (excerpt)

@Component({ ... })
@RouteConfig([
  {path:'/crisis-center/...', name: 'CrisisCenter', component: CrisisListComponent},
  {path:'/heroes',        name: 'Heroes',       component: HeroListComponent},
  {path:'/hero/:id',      name: 'HeroDetail',   component: HeroDetailComponent}
])
export class AppComponent { }

crisis-center.component.ts(excerpt)

@RouteConfig([
  {path:'/',         name: 'CrisisCenter', component: CrisisListComponent, useAsDefault: true},
  {path:'/:id',      name: 'CrisisDetail', component: CrisisDetailComponent}
])

Notice that the path ends with a slash and three trailing periods (/...).

That means this is an incomplete route (AKA a non-terminal route). The finished route will be some combination of the parent /crisis-center/ route and a route from the child router that belongs to the designated component.

All is well. The parent route's designated component is the CrisisCenterComponent which is a Routing Component with its own router and routes.

From angular.io router guide

Upvotes: 4

Related Questions