未加星标

Angular Route Ordering

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

The content of this post is based on Angular version >= 2.x unless explicitly stated otherwise.

In Angular, the ordering of the routes in the route configuration matters. And when using feature and routing modules, it is easy to get the routes out of their needed sequence.

Basic Configuration

The following is an example Angular route configuration commonly defined in an app.module.ts file:

RouterModule.forRoot([

{ path: ‘welcome’, component: WelcomeComponent } ,

{ path: ‘products’, component: ProductListComponent },

{ path: ‘product/:id’, component: ProductDetailComponent }

{ path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’},

{ path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

])

The welcome route displays the template for the Welcome Component. ( www.mysite.com/welcome )

The products route displays the template for the Product List Component. ( www.mysite.com/products )

The product/:id route is a parameterized route. It displays the template for the Product Detail Component with the product defined by the id parameter. ( www.mysite.com/product/42 )

The empty path specifies a default route. This is the route that is matched when no path is specified. In this example, the default route redirects to the welcome route. ( www.mysite.com )

The ** defines a wildcard path. This is the route that is matched when no other prior route is matched. It is often used for displaying a 404 (not found) page. But in this example, it redirects to the welcome route. ( www.mysite.com/hello )

These routes are processed from top to bottom and the first match wins.

If we moved the wildcard path up to the top of the list like this:

RouterModule.forRoot([

{ path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

{ path: ‘welcome’, component: WelcomeComponent } ,

{ path: ‘products’, component: ProductListComponent },

{ path: ‘product/:id’, component: ProductDetailComponent }

{ path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’}

])

None of the other routes would ever be matched. The wildcard would always be picked first. So take care on the ordering of the routes in your route configurations.

Feature Modules

As an application gets larger, it is best to break out the features into their own feature modules. This makes the code easier to work with and maintain.

In the above example, we can refactor the product features out of the app.module.ts and add them to their own product.module.ts (ProductModule) :

RouterModule.forChild([

{ path: ‘products’, component: ProductListComponent },

{ path: ‘product/:id’, component: ProductDetailComponent },

])

The resulting app.module.ts routes then look like this:

RouterModule.forRoot([

{ path: ‘welcome’, component: WelcomeComponent },

{ path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’ },

{ path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

]),

ProductModule

But wait! Isn’t our wildcard route now ahead of our product routes? How will our product routes ever be matched?

As it turns out, Angular handles this differently than we may expect. When the RouterModule.forRoute or RouterModule.forChild is used directly, it is processed last . All of the Angular modules (such as ProductModule) are processed first. So even though we define the wildcard route above ProductModule in this example, the routes defined in the RouterModule.forRoot() are moved to the end and processed last. So all of our routes still work as expected.

Routing Modules

In some cases, we may want to remove the routes from the app.module.ts and move them to their own module, such as app-routing.module.ts (AppRoutingModule) :

RouterModule.forRoot([

{ path: ‘welcome’, component: WelcomeComponent },

{ path: ”, redirectTo: ‘welcome’, pathMatch: ‘full’},

{ path: ‘**’, redirectTo: ‘welcome’, pathMatch: ‘full’ }

])

If we then simply replace the routes in app.module.ts with the routing module like this:

AppRoutingModule,

ProductModule

Our product routes will stop working. Now that all of our routes are in modules, they are processed in their defined order. So the wildcard path in the AppRoutingModule will come *before* any of the routes defined in the ProductModule .

The app.module.ts modules must instead be defined in the appropriate order:

ProductModule,

AppRoutingModule

For more information on routing, check out my Pluralsight course: “ Angular 2: Getting Started ”

For a code example, check out my github repo .

Enjoy!

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Angular Route Ordering
本站链接:http://www.codesec.net/view/522329.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(22)