首先谈谈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 { }
参考
