這次帶給大家如何使用Angular內Router(路由)應用,使用Angular內Router(路由)應用的注意事項有哪些,下面就是實戰案例,一起來看一下。
序言:
Angular APP 視圖之間的跳轉,依賴Router (路由),這一章,我們來講述Router 的應用
運行結果如下。設定了3個導覽欄, Home、 About、Dashboard。點選不同的導覽列,跳到對應的頁面:
##建立3個component
路由與設定
(1)**引入Angular Router **當用到Angular Router 時,需要引入RouterModule,如下:
// app.module.ts import { RouterModule } from '@angular/router'; imports: [ BrowserModule, RouterModule ],(2)路由配置還記得由誰來管理component 的吧,沒錯,由module 來管理。所以,把新創建的 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的路徑,為方便管理,我們把新建立的component 移到了 components 資料夾中。
建立 Router Configure 檔案
在 app 目錄下, 建立 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 } ];說明: Angular 2.X 以上版本,開始使用TypeScript 寫程式碼,而不再是
JavaScript,所以,檔案的字尾是: ts 而不是js
這個routerConfigue 文件,怎麼呼叫呢?需要把它載入到 app.module.ts 中,這是因為 app.moudle.ts 是整個Angular App 的入口。// app.module.ts import { appRoutes } from './routerConfig'; imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ],
宣告Router Outlet
在app.component.html 檔案中,新增程式碼:<p 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> </p>
執行
#進入到該工程所在的路徑,運行;ng serve --open當webpack 編譯成功後,在瀏覽器網址列中,輸入: http://localhost:4200# 即可看到本篇開始的結果。
關於Router,換一種寫法:
在app.moudle.ts 檔案中,程式碼如下:imports: [ BrowserModule, RouterModule.forRoot( [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'dashboard', component: DashboardComponent } ] ) ],這樣一來,可以不用單獨建立routerConfigure.ts 檔案。
小結
自從引入了元件導向(component)後,路由管理相比AngularJS (1.X),方便了很多。
進一步優化:或許你已經注意到,當訪問 http://localhost:4200 時,它的路徑應該是 “/”, 我們應該設定這個預設的路徑。{ path: '', redirectTo:'/home', pathMatch: 'full' },我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! 推薦閱讀:
以上是如何使用Angular內Router(路由)應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!