I am trying to find a concrete example on how to use the router in Angular 2. Furthermore the current angular2.d.ts typing file from the
5 min quickstart does not support @Routes annotation.
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
回答1:
A helpful Angular 2 Router example. The concrete code can be found here.
回答2:
Main component and Class of Routing in Angular 2.
router-link – router-link directive is use to declare link into view . Its can contains optional parameters also.
Example :
<a [router-link]="['/AboutUs']">About Us</a>
router-outlet – Its work as a placeholder for views to render then component. Means template and templateUrl will be render on that location where you will use router-outlet directive.
Example :
<router-outlet></router-outlet>
@RouteConfig – We map URLs to components in this section which used inside the .
Example :
@RouteConfig([
{path: '/', component: HomeComponent, as: 'Home'},
{path: '/aboutus', component: AboutUsComponent, as: 'AboutUs' }
{path: '/contactus', component: ContactUsComponent, as: 'ContactUs' }
])
RouteParams – Parameter to a component which rendered by the router.
Read this article for more http://www.codeandyou.com/2015/11/understand-routing-in-angular-2.html
回答3:
Basic Routing in Angular2 (Updated to Beta)
Firstly to setup the routing in angular2 you have to import the router file in your main file index.html i.e
<script src="node_modules/angular2/bundles/router.dev.js"></script>
than we have to add <base href="/"> just after the <head> tag in index.html to tell router how to compose navigation URLs.
by doing so we just setteled up the basic configuration for routing in angular.
Now its time to configur the routing, te setup our routers according to need, basically we need three basic things those are -
- routerLink
- router-outlet
- and @RouteConfig
routerLink -
RouterLink expects the value to be an array of route names, followed by the params for that level of routing.
Quoted from the official's
The first route name should be prepended with /, ./, or ../. If the route begins with /, the router will look up the route from the root of the app. If the route begins with ./, the router will instead look in the current component's children for the route. And if the route begins with ../, the router will look at the current component's parent
we define routerLink like this -
<a [routerLink]="['./HomeCmp']">Hello Routing</a>
Here we can provide parameter along with routing those are optional, also we can provide child route from here. parameter like this -
<a [routerLink]="['./HomeCmp', {key : value}]">Hello Routing</a>
router-outlet
A router outlet is a placeholder where routing data is to be displayed on display.there are also exist another type of router-outlet called as aux route. can be used like this -
<router-outlet></router-outlet>
@RouteConfig
There are various property's exist on the routConfig like, path, name, component etc. When the browser's URL changes, the router looks for a corresponding RouteDefinition from which it can determine the component to display.
path - is used to define whihc is shown as url in the address bar of browser.
name - should be used as the name while defining routerLink name.
component - means whihc compoent to be load while this route is active.
useDefaultAs - set true if we want to set this as default route.
example is -
@RouteConfig([
{path:'/crisis-center', name: 'CrisisCenter', component: CrisisListComponent, useDefaultAs : true}
])
For more information see also -
- https://angular.io/docs/ts/latest/guide/router.html
- http://blog.thoughtram.io/angular/2015/06/16/routing-in-angular-2.html
- http://blog.ng-book.com/basic-routing-in-angular-2/
for child routing see also -
- How to use child routes in Angular 2
UPDATE TO ANGULAR2 RC
There are alot of changes has been made in routing in angular2 after RC some of them points i am going to mention here may help someone :-
angular2/routerhas been changed with@angular/router(also you can use old functionality of routing using import of@angular/router-deprecatedbut as of now we have to use@angular/router).@RouteConfighas been changed with@Routes.
for example :-
@Routes([
{path: '/crisis-center', component: CrisisListComponent},
{path: '/heroes', component: HeroListComponent}
])
Rest ill update soon my answer as per update in changelog.
- Best Article for new @Route update to angular2 RC
回答4:
The best I've seen thus far is https://github.com/angular-class/angular2-webpack-starter (it's with webpack as well - it's worth the effort IMHO) Also, it's with TypeScript support as well.
Also, based on the last link is my starter, which can be found here - https://github.com/EladRK/angular-starter
回答5:
Maybe to late, but try this one :)
回答6:
Routing in Angular 2 RC.1
Here is another resource you can try (Angular RC.1): https://playcode.org/routing-in-angular-2-rc-1/
And here is the code: https://github.com/jlsuarezs/RoutingExample
I recommend you to use the Angular-CLI to create new routes: https://github.com/angular/angular-cli
Example: https://github.com/angular/angular-cli#generating-a-route
