首先谈谈App
应用,平时我们用的App
总是多页面,如果用原生Android
或者IOS
,当然流畅.
但是当我们用原始Html
开发页面,用< a href="#"></a>
这样的标签去链接页面,切换起来没有那么流畅,页面加载进来也慢.
在Angular
开发前端构建单页面应用(SPA)
时,可以用路由进行切换,因为在加载Angular
应用时,会整个缓存在手机上.我们用路由进行切换时,不用再发起HTTP
请求了,体验得到优化.
基础知识
大多数带路由的应用都需要在index.html
的<head>
标签下添加一个<base>
元素,来告诉路由器如何合成导航用的URL
;
<base href="/">
编辑src/app/app.module.ts
文件
import { RouterModule, Routes } from '@angular/router';
配置路由
当浏览器的URL
变化时,路由器会查找对应的Route
并用RouterModule.forRoot
方法来配置路由器, 并把它的返回值添加到AppModule
的imports
数组中。
编辑src/app/app.routes.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppNavBarComponent } from './components/app-navbar/app.my-navbar';
import { AppLoginFormComponent } from './components/app-loginform/app.loginform';
import { AppPagenotfoundComponent } from './components/app-pagenotfound/app-pagenotfound.component';
import { AppIndexComponent } from './components/app-index/app-index.component';
const appRoutes: Routes = [
{ path: 'login', component: AppLoginFormComponent },
{
path: 'index',
component: AppIndexComponent,
data: { title: 'Index' }
},
{ path: '', redirectTo: '/index', pathMatch: 'full' },
{ path: '**', component: AppPagenotfoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
// other imports here
],
exports: [
RouterModule
]
})
export class AppRoutesModule { }
路由中的空路径('')
表示应用的默认路径,当URL为空时就会访问那里,因此它通常会作为起点。 这个默认路由会重定向到URL/index
,并显示AppIndexComponent
。
最后一个路由中的**
路径是一个通配符。当所请求的URL
不匹配前面定义的路由表中的任何路径时,路由器就会选择此路由。 这个特性可用于显示“404 - Not Found
”页,或自动重定向到其它路由。
路由出口
<router-outlet>
标记出路由器该在哪里显示视图
编辑app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
router-outlet
必须在根组件中,通过根组件管理其他组件.
路由器链接
RouterLink
指令可以让路由器控制 <a>
标签
RouterLinkActive
指令可以帮用户在外观上区分出当前选中的“活动”路由。 当与它关联的RouterLink
被激活时,路由器会把CSS
类active
添加到这个元素上
编辑app/components/app-navbar/app.my-navbar.html
<ul class="nav navbar-nav navbar-right">
<li>
<a routerLink="/login" routerLinkActive="active">登录</a>
</li>
<li>
<a routerLink="/index" routerLinkActive="active">注册</a>
</li>
<li>
<a routerLink="/index" routerLinkActive="active">{{ title }}</a>
</li>
</ul>
编辑app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import { AppRoutesModule } from './app.routes';
import { AppComponent } from './app.component';
import { AppNavBarComponent } from './components/app-navbar/app.my-navbar';
import { AppLoginFormComponent } from './components/app-loginform/app.loginform';
import { AppPagenotfoundComponent } from './components/app-pagenotfound/app-pagenotfound.component';
import { AppIndexComponent } from './components/app-index/app-index.component';
@NgModule({
declarations: [
AppComponent,
AppNavBarComponent,
AppLoginFormComponent,
AppPagenotfoundComponent,
AppIndexComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
AppRoutesModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }