友情提示：圖片看不清請點擊鼠標右鍵，查看圖像
一、安裝SVN（或者git）
1、下載小烏龜工具（SVN工具），百度搜索SVN即可
2、打開SVN安裝包，一路next默認安裝即可
二、從公司SVN （或者git）上面拷貝公司目前的前端代碼
1、打開windows文件資源管理器選擇開發目錄，點擊鼠標右鍵彈出window menu提示框，選擇
SVN checkout
2、URL of repository:填入公司SVN地址
3、Checkout directory:開發目錄路徑
三、進入開發環境，新建模塊
1、打開windows文件資源管理器，進入開發目錄，以腳手架目錄為例就是：
項目文件夾/src/app2、執行
ng g c 模塊名新建模塊的文件夾,更多ng-cli快捷操作請訪問 angular-cli github地址3、執行
ng g m 模塊名新建模塊的module文件（module文件作為業務模塊的入口，管理和其他組件，module，指令，服務的關系）4、選擇新模塊文件夾，右鍵點擊添加新文件，命名為
模塊名.routing.ts，并在test.module.ts元數據的imports屬性里面引入該路由類（即TestRouting），該文件為新模塊的路由配置文件，該文件可以配置子路由，用于路由到該模塊的子模塊，下面是新建模塊文件夾格式
5、這里以test模塊為例寫一個test.routing.ts配置
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TestComponent } from './test.component';
import { TestChildOneComponent } from './test-child-one/test-child-one.component'
import { TestChildTwoComponent } from './test-child-two/test-child-two.component'
const routes: Routes = [
{
path: '',
component: TestComponent,
data: {
title: '測試模塊' //這個data數據可以通過路由參數對象獲取到,有面包屑導航需求場景時有用
},
//如果需要路由到子模塊，則添加children屬性
children: [
{
path: 'test-child-one',
component: TestChildOneComponent
},
{
path: 'test-child-two',
component: TestChildTwoComponent
}
]
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class TestRouting { }
四、main路由里面添加鏈接到新添加模塊的路由（main路由用于管理公司業務模塊）
打開
main/main.routing.ts文件，添加鏈接到新模塊的路由，具體見下面代碼
下面展示main模塊的html模板：main.component.html
這里順便展示一下根路由app.routing.ts和對應的html模板app.component.html
app.component.html模板如下：
app.routing.ts模板如下：
五.引入模塊依賴的基類
1、模塊module.ts里面引入WustModule,這里以testModule為例子
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WustModule } from '@toplinker/wust';
import { TestComponent } from './test.component';
@NgModule({
imports; [
commonModule,
WustModule
],
declarations: [TestComponent],
providers: [],
exports: [TestComponent]
})
export class TestModule { }
2、模塊component.ts里面繼承基類baseComponent
import { Component, OnInit } from '@angular/core';
import { IbdCommonService,IbdBaseComponent } from '@topibd/ibd-core';
@Component({
selector: 'ibd-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent extends IbdBaseComponent implements OnInit {
constructor(private commonService: IbdCommonService) {
super(commonService)
}
ngOnInit() {}
}
3、為什么要導入WustModule，為什么要繼承BaseComponent？
（1）、WustModule管理了項目的公用服務，組件，指令，動畫，設計WustModule的初衷就是為了封裝一個公用的組件包，這些組件類都是可以在其他ng項目中使用的，暴露出WustModule接口，你就可以使用WustModule中管理的所有公共組件，服務，指令，動畫
（2）、BaseComponent里面封裝了一些所有模塊都有可能使用的公共方法，比如初始化配置的方法：getModuleConfig,翻譯的方法：tr,切換語言的方法：setLangPackage，子類繼承BaseComponent類，子類必須要繼承父類的構造函數，由于父類構造函數必須要傳入IbdCommonService的實例，所以需要
super(commonService)調用父類構造函數，繼承了父類就可以使用父類里面的任何方法，在子類通過this.getModuleConfig()調用getModuleConfig()方法時，它會首先在子類對象里面尋找 getModuleConfig方法，如果子類沒有，就會順著原型鏈去父類里面尋找getModuleConfig方法，繼承也會繼承父類構造函數依賴注入的實例對象，關于繼承不再多說，如果你們有不懂得可以私密我，然后我總結一篇關于angular2+的繼承理解（有錯歡迎各路老司機指正，此處斜眼笑），es6繼承請查閱阮一峰老師的es6標準入門-class繼承篇（3）、以下展示WustModule包所在的目錄
（4）、以下展示wust-module.ts文件代碼
（5）、以下展示base-component.ts代碼
六、我想說
1、由于我目前的公司是將所有的模塊打成了私有npm包，然后發布到私有npm服務器上，所以你可能看到代碼中有些地方寫的
@topibd/xxx請不要一味照搬，須理解代碼后使用，@topibd/xxx請更換為對應模塊的文件夾目錄2、有問題指正或者技術交流歡迎留言郵箱：1055120207@qq.com， 謝謝！
