Angular 5.x 學(xué)習(xí)筆記之Router(路由)應(yīng)用
序言：
Angular APP 視圖之間的跳轉(zhuǎn)，依賴于 Router （路由），這一章，我們來(lái)講述 Router 的應(yīng)用
實(shí)例講解
運(yùn)行結(jié)果如下。 設(shè)置了3個(gè)導(dǎo)航欄， Home、 About、Dashboard。 點(diǎn)擊不同的導(dǎo)航欄，跳轉(zhuǎn)到相應(yīng)的頁(yè)面：
創(chuàng)建3個(gè) component
- ng g c home
- ng g c about
- ng g c dashboard
路由與配置
（1）**引入 Angular Router **
當(dāng)用到 Angular Router 時(shí)，需要引入 RouterModule，如下：
// app.module.ts
import { RouterModule } from '@angular/router';
imports: [
BrowserModule, RouterModule
],
（2） 路由配置
還記得由誰(shuí)來(lái)管理component 的吧，沒(méi)錯(cuò)，由 module 來(lái)管理。 所以，把新創(chuàng)建的 component，引入到 app.moudle 中。 如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { appRoutes } from './routerConfig';
import { AppComponent } from './app.component';
import { AboutComponent } from './components/about/about.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
提示： 注意component的路徑，為便于管理，我們把新創(chuàng)建的component 移到了 components 文件夾中。
創(chuàng)建 Router Configure 文件
在 app 目錄下， 創(chuàng)建 routerConfig.ts 文件。 代碼如下：
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
export const appRoutes: Routes = [
{ path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{ path: 'dashboard',
component: DashboardComponent
}
];
說(shuō)明： Angular 2.X 以上版本，開始使用 TypeScript 編寫代碼，而不再是 JavaScript，所以，文件的后綴是： ts 而不是 js
這個(gè) routerConfigue 文件，怎么調(diào)用呢？ 需要把它加載到 app.module.ts 中，這是因?yàn)?app.moudle.ts 是整個(gè)Angular App 的入口。
// app.module.ts
import { appRoutes } from './routerConfig';
imports: [
BrowserModule,
RouterModule.forRoot(appRoutes)
],
聲明 Router Outlet
在 app.component.html 文件中，添加代碼：
<div style="text-align:center">
<h1>
{{title}}!!
</h1>
<nav>
<a routerLink="home" routerLinkActive="active">Home</a>
<a routerLink="about">About</a>
<a routerLink="dashboard">Dashboard</a>
</nav>
<router-outlet></router-outlet>
</div>
運(yùn)行
進(jìn)入到該工程所在的路徑， 運(yùn)行；
ng serve --open
當(dāng) webpack 編譯成功后，在瀏覽器地址欄中，輸入： http://localhost:4200
即可看到本篇開始的結(jié)果。
關(guān)于Router，換一種寫法：
在 app.moudle.ts 文件中，代碼如下 ：
imports: [
BrowserModule,
RouterModule.forRoot(
[
{ path: 'home',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent
},
{
path: 'dashboard',
component: DashboardComponent
}
]
)
],
這樣一來(lái)，可以不用單獨(dú)創(chuàng)建 routerConfigure.ts 文件。
小結(jié)
自從引入了面向組件（component）后，路由管理相比 AngularJS （1.X），方便了很多。
進(jìn)一步優(yōu)化：
或許你已經(jīng)注意到，當(dāng)訪問(wèn) http://localhost:4200 時(shí)，它的路徑應(yīng)該是 “/”， 我們應(yīng)該設(shè)置這個(gè)默認(rèn)的路徑。
{
path: '',
redirectTo:'/home',
pathMatch: 'full'
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- Angularjs中UI Router全攻略
- angularJS中router的使用指南
- angular2中router路由跳轉(zhuǎn)navigate的使用與刷新頁(yè)面問(wèn)題詳解
- 詳解Angular4中路由Router類的跳轉(zhuǎn)navigate
- Angular2學(xué)習(xí)筆記——詳解路由器模型（Router）
- 淺析angularJS中的ui-router和ng-grid模塊
- Angularjs中UI Router的使用方法
- angular基于路由控制ui-router實(shí)現(xiàn)系統(tǒng)權(quán)限控制
- AngularJS ui-router (嵌套路由)實(shí)例
- 詳解Angular路由 ng-route和ui-router的區(qū)別
- Angular中使用ui router實(shí)現(xiàn)系統(tǒng)權(quán)限控制及開發(fā)遇到問(wèn)題
相關(guān)文章
本篇文章主要介紹了剖析Angular Component的源碼示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
本文通過(guò)幾個(gè)循序漸進(jìn)的例子，給大家詳細(xì)講解了如何快速入門AngularJS，十分的實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。2015-04-04
angularjs中ng-bind-html的用法總結(jié)
這篇文章主要介紹了angularjs中ng-bind-html的用法總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
本篇文章主要介紹了angular中的cookie讀寫方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
AngularJS中過(guò)濾器的使用與自定義實(shí)例代碼
這篇文章運(yùn)用實(shí)例代碼給大家介紹了angularjs中過(guò)濾器的使用和自定義過(guò)濾器，對(duì)大家學(xué)習(xí)AngularJS具有一定的參考借鑒價(jià)值，感興趣的朋友們可以參考借鑒。2016-09-09
AngularJS實(shí)現(xiàn)多級(jí)下拉框
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)多級(jí)下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Angularjs中的頁(yè)面訪問(wèn)權(quán)限怎么設(shè)置
最近一直在忙一個(gè)手機(jī)端的項(xiàng)目，所以對(duì)js學(xué)習(xí)有點(diǎn)松撤了。今天小編抽時(shí)間跟大家分享一篇關(guān)于angularjs中的頁(yè)面訪問(wèn)權(quán)限設(shè)置教處，對(duì)angularjs訪問(wèn)權(quán)限感興趣的朋友一起學(xué)習(xí)吧2016-11-11
詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法
這篇文章主要介紹了詳解Angular中實(shí)現(xiàn)自定義組件的雙向綁定的兩種方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
Angular.js中$resource高大上的數(shù)據(jù)交互詳解
這篇文章主要給大家介紹了關(guān)于Angular.js中$resource高大上的數(shù)據(jù)交互的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用angular.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。2017-07-07
angularjs下ng-repeat點(diǎn)擊元素改變樣式的實(shí)現(xiàn)方法
今天小編就為大家分享一篇angularjs下ng-repeat點(diǎn)擊元素改變樣式的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09