这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了 Angular2 (RC4) 路由与导航的相关资料, 需要的朋友可以参考下
基础知识
1.<base href>
大多数带路由的应用都要在 index.html 的 <head> 标签下添加一个 <base> 元素。
2. 导入路由库
import {ROUTER_DIRECTIVES} from '@angular/router';
3. 配置
首选方案是用带 "路由数组" 的 provideRouter 工厂函数([provideRouter(routes)])来启动此应用。
app.routes.ts
- import {
- provideRouter,
- RouterConfig
- }
- from '@angular/router';
- const routes: RouterConfig = [{
- path: 'crisis-center',
- component: CrisisCenterComponent
- },
- {
- path: 'heroes',
- component: HeroListComponent
- },
- {
- path: 'hero/:id',
- component: HeroDetailComponent
- },
- {
- path: '**',
- component: PageNotFoundComponent
- }];
- export const appRouterProviders = [provideRouter(routes)];
RouterConfig 是一个路由数组,它决定如何导航。每个 Route 会把一个 URL 的 path 映射到一个组件。
path 不能使用斜杠 / 开头。路由器会为我们解析和生成 URL。
第三个路由中的 id 是一个路由参数的 token。
第四个路由中的 ** 代表路由是一个通配符路径。如果当前无法匹配上我们配置过的任何一个路径,路由器就会匹配上这一个,类似于 switch 中的 default。当需要显示 404 页面,该特性非常有用。
我们将配置好的 routes 数组传给 provideRouter()函数,这个函数返回一个经过配置的 Router 服务提供商
最后通过 appRouterProviders 数组导出这个提供商,以便在 main.ts 中简单的注册路由器依赖。 在 main.ts 中的 bootstrap 函数中注册路由器的提供商。
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>
上面的配置完成后,当 URL 变为 /heroes 时,路由器就会匹配到 path 为 heroes 的 Route,并且在宿主视图中的 <router-outlet> 中显示 HeroListComponent 组件。
5.[routerLink]
我们在 <a> 标签中添加了 routerLink 指令,可以一次性绑定到我们路由中的 path 值。
如果 routerLink 想要绑定动态信息,我们就可以把它绑定到一个能够返回路由链接数组的模板表达式上。路由器最终会把此数组解析成一个 URL 和一个组件视图。
我们还可以往 <a> 中添加一个 routerLinkActive 指令,用于在相关的 routerLink 被激活时所在元素添加或移除 CSS 类。该指令可以直接添加到该元素上,也可以直接添加到其父元素上。
AppComponent 模板
- template: `
- <h1>Component Router</h1>
- <nav>
- <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
- <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
- </nav>
- <router-outlet></router-outlet>
- `,
6. 路由器状态
在每个导航的生命周期完成时,路由器会构建出一个 ActivatedRoute 组成的树,它表示路由器的当前状态。我们可以在应用中任何使用 Router 服务及其 routerState 属性来访问当前的 RouterState 值。
7.ROUTER_DIRECTIVES
RouterLink、RouterLinkActive 和 RouterOutlet 是 ROUTER_DIRECTIVES 集合中的指令,所以需要在 @Component 元数据中加入到 directives 数组中。
directives: [ROUTER_DIRECTIVES]
来源: http://www.phperz.com/article/17/0521/331689.html