ANGULAR2 (RC5) Routing and navigation detailed _angularjs

Previously summed up the RC4 routing configuration, Angular2 upgrade RC5 after the addition of Ngmodule and Routermodule and many other components, so the current routing configuration is also changing a lot.

1.<base href>

Most of the leading-by applications are to add a <base> element to the top of the index.html

2. Configure the Router

App.routing.ts

Import {Routes, routermodule} from ' @angular/router ';
Const Approutes:routes = [
  {
    path: ',
    redirectto: '/dashboard ',
    pathmatch: ' Full '
  },
  {
    Path: ' Heroes ',
    component:heroescomponent
  },
  {
    path: ' Dashboard ',
    component: Dashboardcomponent
  },
  {
    path: ' Detail/:id ',
    component:herodetailcomponent
  }
]
Export Const Routing = Routermodule.forroot (approutes);

Creates an array of routes types that match each URL to path, and the matching success is mapped to the corresponding component component on that path.
The routing array is then approutes via Routermodule.forroot (approutes).

3. Reference routing

App.module.ts

Import {routing} from './app.routing ';

@NgModule ({
  imports: [
    browsermodule,
    routing
  ],
  declarations: [
    appcomponent
    //Some Component
  ],
  bootstrap: [Appcomponent]
})
export class Appmodule {}

In this way, we refer to our configured routers in the @ngmodule imports.

4. Using Routing in Templates

By completing the 2 and 3 steps above, we can use routing in the template

App.component.ts

Template: '
   <nav>
     <a routerlink= '/dashboard ' routerlinkactive= ' active ' >Dashboard</a>
     <a routerlink= '/heroes ' routerlinkactive= ' active ' >Heroes</a>
   </nav>
   < Router-outlet></router-outlet>
'

We added the Routerlink directive to the <a> tab, and we can bind to the path value in our route at once.
If the path and routerlink of this URL match, the mapped component is displayed in <router-outlet>.

We can also add a routerlinkactive directive to <a> to add or remove CSS classes when the associated Routerlink is activated. The directive can be added directly to the element, or it can be added directly to its parent element.

5. Summary

Here we have completed the routing configuration of Angular2 (RC5). The difference between the routing configuration of RC5 and RC4 is that RC5 routing does not need to import the routing library in a TS file that sets the routing template

Import {router_directives} from ' @angular/router ';

The introduction of a configured route directly into the Ngmodule can

@NgModule ({
  imports: [
    routing
  ]
})

The imported routing component consists of the

Import {providerouter, routerconfig} from ' @angular/router ';

into a

Import {Routes, routermodule} from ' @angular/router ';

The route array is exported by

Export const Approuterproviders = [Providerouter (routes)];

into a

Export Const Routing = Routermodule.forroot (approutes);

The other parts are largely the same, such as the configuration of the array of routes, routerlink directives, <router-outlet>, and so on. For more information, see the routing configuration of RC4 I have written.

The above is the ANGULAR2 (RC5) Routing and navigation data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!