最近公司的项目需求，需要设计一套后台管理系统的前端框架，我使用了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