這次帶給大家Angular路由實戰案例應用,Angular路由使用的注意事項有哪些,下面就是實戰案例,一起來看一下。
序言:
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 ],
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';
建立 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 } ];
// 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
關於Router,換一種寫法:
在app.moudle.ts 檔案中,程式碼如下:imports: [ BrowserModule, RouterModule.forRoot( [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'dashboard', component: DashboardComponent } ] ) ],
小結
自從引入了元件導向(component)後,路由管理相比 AngularJS (1.X),方便了許多。 進一步優化:或許你已經注意到,當訪問 http://localhost:4200 時,它的路徑應該是 “/”, 我們應該設定這個預設的路徑。{ path: '', redirectTo:'/home', pathMatch: 'full' },
以上是Angular路由實戰案例應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!