这里有新鲜出炉的 AngularJS Tutorial 中文版,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 Angular2 (RC5) 路由与导航的相关资料, 需要的朋友可以参考下
之前总结过 RC4 的路由配置,Angular2 升级 RC5 之后增加了 NgModule 和 RouterModule 等等很多组件,所以现在的路由配置方式也变化比较大。
1.<base href>
大多数带路由的应用都要在 index.html 的 <head> 标签下顶部添加一个 <base> 元素。
2. 配置路由器
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);
创建一个 Routes 类型数组,它会把每一个 URL 匹配到 path,匹配成功则映射到该 path 对应的组件 component 上。 然后把这个路由数组 appRoutes 通过 RouterModule.forRoot(appRoutes) 导出。
3. 引用路由
app.module.ts
- import { routing } from './app.routing';
- @NgModule({
- imports: [
- BrowserModule,
- routing
- ],
- declarations: [
- AppComponent
- // some component
- ],
- bootstrap: [ AppComponent ]
- })
- export class AppModule {}
就这样,我们在 @NgModule 的 imports 中引用了我们配置好的路由器。
4. 在模板中使用路由
完成上面的 2、3 步骤,我们就能在模板中使用路由了
app.component.ts
- template: `
- <nav>
- <a routerLink='/dashboard' routerLinkActive='active'>Dashboard</a>
- <a routerLink='/heroes' routerLinkActive='active'>Heroes</a>
- </nav>
- <router-outlet></router-outlet>
- `
我们在标签中添加了 routerLink 指令,可以一次性绑定到我们路由中的 path 值。
如果这个 URL 的 path 和 routerLink 匹配,就把映射到的组件在
我们还可以往 <a> 中添加一个 routerLinkActive 指令,用于在相关的 routerLink 被激活时所在元素添加或移除 CSS 类。该指令可以直接添加到该元素上,也可以直接添加到其父元素上。
5. 总结
在此,我们就完成了 Angular2 (RC5) 的路由配置。RC5 和 RC4 的路由配置不同之处就在于, RC5 的路由不需要在设置路由模板的 TS 文件导入路由库
import {ROUTER_DIRECTIVES} from '@angular/router';
直接在 NgModule 中引入配置好的路由就可以
- @NgModule({
- imports: [
- routing
- ]
- })
导入的路由组件由
import {provideRouter, RouterConfig} from '@angular/router';
变成了
import {Routes, RouterModule} from '@angular/router';
路由数组的导出方式由
export const appRouterProviders = [provideRouter(routes)];
变成了
export const routing = RouterModule.forRoot(appRoutes);
其他部分大体上都是相同的,比如路由的数组的配置写法、routerLink 指令和 <router-outlet> 等等。详情见我写过的 RC4 的路由配置方式。
来源: http://www.phperz.com/article/17/0502/331688.html