最近公司的項目需求，需要設計一套後臺管理系統的前端框架，我使用了Angular-cli構建Angualr2的模板，並按照需求，添加了ng2-charts/ng2-smart-table/file-upload等ng2的插件，項目的源碼地址在：https://github.com/taoziUncle/ng2-admin-master
項目的結構如下：
一、自動化構建ng2項目
1、安裝node.js 下載地址：http://nodejs.cn/download/
使用
node --version //查看node版本
npm -v //查看npm版本2、安裝angular-cli
npm install -g @angular/cli2.1、構建ng項目ng new my-app應用代碼位於src文件夾中。 所有的Angular組件、模板、樣式、圖片以及你的應用所需的任何東西都在那裏。 這個文件夾之外的文件都是爲構建應用提供支持用的。
| 文件 | 用途 |
|---|---|
| node_modules/... | Node.js創建了這個文件夾，並且把package.json中列舉的所有第三方模塊都放在其中。 |
| angular-cli.json | Angular-CLI的配置。 在這個文件中，你可以設置一系列默認值，還能配置當構件項目時應該排除哪些文件。 要了解更多，請參閱Angular-CLI的官方文檔。 |
| package.json | npm配置文件，其中列出了項目使用到的第三方依賴包。 你還可以在這裏添加自己的自定義腳本。 |
| src | 項目所在目錄 |
2.2、運行ng項目cd my-app
ng serve 或者 npm start2.3、打包發佈ng build目錄中就會出現dist文件夾，可以看到裏面就是打包後的文件，包含一些html、js等文件
二、ng2 模塊化結構
1、Module 模塊
Angular 應用是模塊化的，並且 Angular 有自己的模塊系統，它被稱爲 Angular 模塊或 NgModules。
每個 Angular 應用至少有一個模塊（根模塊），習慣上命名爲AppModule。
根模塊在一些小型應用中可能是唯一的模塊，大多數應用會有很多特性模塊，每個模塊都是一個內聚的代碼塊專注於某個應用領域、工作流或緊密相關的功能。
NgModule是一個裝飾器函數，它接收一個用來描述模塊屬性的元數據對象。其中最重要的屬性是：
- declarations - 聲明本模塊中擁有的視圖類。 Angular 有三種視圖類：組件、指令和管道。
- exports - declarations 的子集，可用於其它模塊的組件模板。
- imports - 本模塊聲明的組件模板需要的類所在的其它模塊。
- providers - 服務的創建者，並加入到全局服務列表中，可用於應用任何部分。
- bootstrap - 指定應用的主視圖（稱爲根組件），它是所有其它視圖的宿主。只有根模塊才能設置bootstrap屬性。2、Component 組件
組件負責控制屏幕上的一小塊區域，我們稱之爲視圖。
在下方的示例代碼中，component主要負責三件事：
- 從ng2模塊庫中導入Component,OnInit。
- 定義了組件的模板templateUrl。
- 操作模板中的數據，類似於angular1的controller。
import { Component,OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit{
title="";
ngOnInit(){
this.title = "Navigation";
};
}3、Template 模板
通過組件的自帶的模板來定義組件視圖。模板以 HTML 形式存在，告訴 Angular 如何渲染組件。
以上的結構ng2最基本的模塊化結構，在用@angular/cli構建的項目中已經自帶了這些。三、添加第一層Route
1、新建路由模塊app.routing.ts，示例代碼如下
import {Routes, RouterModule} from '@angular/router';
import {AnalysisComponent} from './module/view.analysis';
import {LoginComponent} from './login/login.component';
const appRoutes:Routes = [
{
path: '',
component: LoginComponent
},
{
path: 'content',
component: AnalysisComponent
},
{
path: '**',
component: LoginComponent
}
];
export const routing = RouterModule.forRoot(appRoutes);2、在根模塊文件app.mudule.ts中引入路由
import {routing} from './app.routing';
@NgModule({
declarations: [
...
],
imports: [
routing,
...
],
providers: [
...
],
bootstrap: [AppComponent]
})3、頁面內使用路由進行跳轉
<a routerLink="/content" class="btn btn-primary">
Back to Dashboard
</a>四、添加新頁面
- 1、新建component文件和html文件，並將html文件引入到component組件中。
- 2、將新建的component組件引入到路由中，並配置路由參數。
- 3、將新建的component組件引入到對應的mudule文件，這裏是app.module.ts文件
五、添加二級路由（難點：坑多慎行）
由於項目需求，用戶登錄後進入主頁面，點擊主頁面的模塊進入到後臺dashboard頁面，dashboard頁面擁有自己獨立的navigation，因此需要建立子路由。
1、創建新的Child Module with Route，並引入到主Module中
如項目中的dashboard.mudule.ts2、新建一組component、html 並將html引入到component中
如項目中的
dashboard.component.ts
dashboard.component.html3、將新建的component引入到子模塊（Child Module）中
import { DashboardComponent } from './dashboard.component';
@NgModule({
imports: [
...
],
declarations: [
DashboardComponent,
...
],
providers: []
})4、在子模塊（Child Module）中配置路由
const tablesRoutes: Routes = [
{
path:'main/:id',
component:NavComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent }
]
}]注意：一定要添加一組path: ''；否則會報錯
5、新建nav.component.ts文件設置導航，並配置已添加的路由路徑。
this.dashboard = "/main/"+this.para+"/dashboard"
this.routers = [
{
href: this.dashboard,
name: "Dashboard",
type: false
}
];6、在nav.component.html文件中實現跳轉。
<a routerLink="{{dashboard}}"><span> Dashboard </span></a>六、二級路由層添加新頁面（重點）
之所以說這部分是重點，因爲絕大多數的頁面添加都在這一層，第一層路由中的頁面很少，只作爲導入層。而第二層路由是用戶到達Dashboard之後，所有頁面的顯示。
以charts爲例：
1、在app文件夾內新建charts文件夾
2、在charts文件夾內新建linecharts文件夾
3、在linecharts文件夾內新建一組組件和模板，如lineCharts.component.ts和lineCharts.component.html,並將html綁定在component組件內。
lineCharts.component.ts 文件內：
@Component({
selector: 'app-charts',
templateUrl: './lineCharts.component.html',
})4、在二級路由文件內添加lineCharts的路由
(1)imporant lineCharts component
import { lineChartsComponent } from '../charts/lineCharts/lineCharts.component';
(2)config Routs for lineCharts
const tablesRoutes: Routes = [
{
path:'main/:id',
component:NavComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'lineCharts', component: lineChartsComponent }
]
}
]
(3)declare lineChartsComponent
@NgModule({
imports: [
...
],
declarations: [
lineChartsComponent,
...
],
providers: []
})5、nav.Component.ts導航組件內添加lineCharts路由
export class NavComponent implements OnInit {
(1)聲明lineCharts變量
public lineCharts = "";
ngOnInit() {
(2)將lineCharts路由路徑命名給變量this.lineCharts
this.lineCharts = "/main/"+this.para+"/lineCharts";
...
(3)從接口獲取this.routers的值，示例代碼如下：
this.routers = [
{
href: this.dashboard,
name: "Dashboard",
type: false
},
{
href: 'charts',
name: "Charts",
type: true,
child: [
{href: this.lineCharts, name: "Line Charts"},
...
]
},
...
];
};
}6、lineCharts.component.ts中配置active時狀態
ngOnInit(){
this.parent.setActiveByPath("charts",this.parent.lineCharts);
};由於nav.component.html中已經配置好動態獲取導航的方法，現在導航已經可以顯示在導航欄上，並可完成跳轉。
七、添加插件（必看）
原則：ng2能解決的事別麻煩外人
在ng2-admin-master框架中，已經集成了三個插件供使用：
由於一般的ng2項目中只有一個根module，因此所有的ng2插件的官方說明都是針對只有一個根module的，在多級路由的項目中就會有坑出現，因此這一部分標爲‘必看’，以ng2-smart-table爲例：
1.按照ng2-smart-table官網的介紹下載：
npm install --save ng2-smart-table2.添加到二級module中，注意不是根module
import { Ng2SmartTableModule } from 'ng2-smart-table';
// ...
@NgModule({
imports: [
// ...
Ng2SmartTableModule,
// ...
],
declarations: [ ... ]
})
// ...3.在相應的組件中就可以直接使用了
八 bug修復
1 解決build後angular2頁面刷新後報404錯誤辦法：
配置app.module.ts
import {PathLocationStrategy, LocationStrategy} from '@angular/common';
@NgModule({
declarations: [AppCmp],
bootstrap: [AppCmp],
imports: [BrowserModule, routes],
providers: [{provide: LocationStrategy, useClass: HashLocationStrategy]
]);2 build後base路徑修復
解決方案： 在package.json文件的scripts中添加命令：
"build":"ng build --base-href ./"
–base-href後面替換成打包後的base路徑
執行：
npm run build