Angular—路由學習

什麼是Angular？

Angular是一個開發平臺，能夠幫助我們更輕鬆的構建Web應用。Angular集聲明式模板、依賴注入、端到端工具和一些最佳實踐於一身，爲我們解決開發方面的各種挑戰。Angular爲開發者提升構建Web、手機或着zhuo桌面應用的能力。

---

什麼是路由？

在Angular中，路由的功能就是建立URL路徑和組件之間的對應關係，根據不同的URL路徑匹配出相應的組件並渲染。路由指令router-outlet起類似於“插座”的作用，根據當前的URL路徑，匹配插入對應的組件結點，實現了主題內容（頁面）的刷新，這就是Angular路由的基本功能。

---

路由的作用？

路由的作用就是通過建立URL和頁面的對應關係，使得不同的頁面可以用不同不同的URL來表示。

---

路由的使用？

1. 定義路由的配置
2. 創建路由模塊
3. 添加<router-outlet> </router-outlet>指令標籤

建立URL和組件的對應關係可通過路由配置來指定，路由的配置包含了多個配置項，一個配置項包含了path和component兩個屬性，path屬性將被Angular用來生成一個URL，component屬性則指定了該URL對應的組件。就這樣建立了連接。

---

路由的配置？

路由配置是一個Routes類型的數組，如下appRoutes數組所示，數組的每一個元素即爲一個路由配置項。下面的代碼定義了兩個配置項，在默認路由策略下，第一個配置項中path值對應的URL爲http://localhost:4002/login ,與LoginComponent組件相關聯；第二個配置項中path值對應的URL爲./workspace/workspace.module#WorkspaceModule.與WorkspaceModule相關聯。

<span style="font-family:'KaiTi_GB2312';font-size:18px;">import { LoginComponent } from './login/login.component';
export const appRoutes=[  //第一步：路由配置：一個帶routers類型的數組，：approutes   .
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path:'login',  //http://localhost:4002/login   //同步路由
    component:LoginComponent
  },
  {
    path: 'workspace',     //異步路由
    loadChildren: './workspace/workspace.module#WorkspaceModule'
   }
    

  ];    </span>

創建根路由模板

<span style="font-family:'KaiTi_GB2312';font-size:18px;">import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import {appRoutes} from './app.routes';

 //第二步：引用1
@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
   
  ],
  imports: [
    FormsModule,
    RouterModule,
    RouterModule.forRoot(appRoutes)   //創建根路由模塊3
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
</span>

添加指令標籤

router-outlet指令的作用就是在組件的模板中開闢出一塊區域，用於顯示URL對應的組件。Angular將模板中使用了<router-outlet>標籤的組件統稱爲路由組件。下面爲在根組件AppComponent的模板中添加一個標籤，如：

<div>
  <router-outlet></router-outlet>    
  <!-- //添加routeroutlet指令  在組件的模板中開闢出一塊區域，用於顯示url所對應的組件 -->
</div>

---

總結：

上邊總結的知識一點點，關於路由還有路由的對象，路由的形式，路由的種類，以及如何在 路由時傳遞數據等等....

大家也可以多去了解，畢竟我掌握的也不是特別好，如果電腦/手機前看的你，有什麼想法的話，可以在評論區指出，謝謝..