ANGULAR2 (RC4) Routing and navigation detailed _angularjs

Basic knowledge

1.<base href>

Most of the lead-led applications are added with a <base> element under the index.html

2. Import Routing Library

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

3. Configure

The preferred scenario is to start the application with the Providerouter factory function ([Providerouter (routes)] with the routing array.

App.routes.ts

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

Const ROUTES:ROUTERCONFIG = [
 {path: ' Crisis-center ', component:crisiscentercomponent},
 {path: ' Heroes ', comp Onent:herolistcomponent},
 {path: ' Hero/:id ', component:herodetailcomponent},
 {path: ' * * ', Component:pageno Tfoundcomponent}
];

Export const Approuterproviders = [
 providerouter (routes)
];

Routerconfig is an array of routes that determines how to navigate. Each route maps the path of a URL to a component.

Path cannot use slash/start. The router resolves and generates URLs for us.

The ID in the third route is the token of a routing parameter.

The * * In Route fourth is a wildcard path that represents a route. If you are not currently able to match any of the paths we have configured, the router will match this one, similar to the default in switch. This feature is useful when you need to display 404 of pages.

We pass the configured routes array to the Providerouter () function, which returns a configured router service provider

Finally, this provider is exported through the Approuterproviders array to simply register the router dependencies in the main.ts.
Registers the router's provider in the Bootstrap function in Main.ts.

Main.ts

Main entry point
import {bootstrap} from   ' @angular/platform-browser-dynamic ';
Import {appcomponent} from  './app.component ';
Import {approuterproviders} from './app.routes ';

Bootstrap (appcomponent, [
 approuterproviders
])
. catch (Err => console.error (err));

4.<router-outlet>

When the above configuration is complete, when the URL becomes/heroes, the router matches the route of Path heroes and displays the Herolistcomponent component in <router-outlet> in the host view.

5.[routerlink]

We added the Routerlink directive to the <a> tab, and we can bind to the path value in our route at once.

If Routerlink wants to bind dynamic information, we can bind it to a template expression that can return an array of routing links. The router will eventually parse the array into a URL and a component view.

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.

Appcomponent templates

Template: '
  
 

6. Router Status

At the end of each navigation lifecycle, the router builds a activatedroute tree that represents the current state of the router. We can access the current Routerstate value in any application using the router service and its routerstate properties.

7.router_directives

Routerlink, Routerlinkactive, and Routeroutlet are instructions in the Router_directives collection, so they need to be added to the @component array in the directives metadata.

directives: [Router_directives]

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