友情提示：圖片看不清請(qǐng)點(diǎn)擊鼠標(biāo)右鍵，查看圖像
一、安裝SVN（或者git）
1、下載小烏龜工具（SVN工具），百度搜索SVN即可
2、打開(kāi)SVN安裝包，一路next默認(rèn)安裝即可
二、從公司SVN （或者git）上面拷貝公司目前的前端代碼
1、打開(kāi)windows文件資源管理器選擇開(kāi)發(fā)目錄，點(diǎn)擊鼠標(biāo)右鍵彈出window menu提示框，選擇
SVN checkout
2、URL of repository:填入公司SVN地址
3、Checkout directory:開(kāi)發(fā)目錄路徑
三、進(jìn)入開(kāi)發(fā)環(huán)境，新建模塊
1、打開(kāi)windows文件資源管理器，進(jìn)入開(kāi)發(fā)目錄，以腳手架目錄為例就是：
項(xiàng)目文件夾/src/app2、執(zhí)行
ng g c 模塊名新建模塊的文件夾,更多ng-cli快捷操作請(qǐng)?jiān)L問(wèn) angular-cli github地址3、執(zhí)行
ng g m 模塊名新建模塊的module文件（module文件作為業(yè)務(wù)模塊的入口，管理和其他組件，module，指令，服務(wù)的關(guān)系）4、選擇新模塊文件夾，右鍵點(diǎn)擊添加新文件，命名為
模塊名.routing.ts，并在test.module.ts元數(shù)據(jù)的imports屬性里面引入該路由類（即TestRouting），該文件為新模塊的路由配置文件，該文件可以配置子路由，用于路由到該模塊的子模塊，下面是新建模塊文件夾格式
5、這里以test模塊為例寫一個(gè)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: '測(cè)試模塊' //這個(gè)data數(shù)據(jù)可以通過(guò)路由參數(shù)對(duì)象獲取到,有面包屑導(dǎo)航需求場(chǎng)景時(shí)有用
},
//如果需要路由到子模塊，則添加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路由用于管理公司業(yè)務(wù)模塊）
打開(kāi)
main/main.routing.ts文件，添加鏈接到新模塊的路由，具體見(jiàn)下面代碼
下面展示main模塊的html模板：main.component.html
這里順便展示一下根路由app.routing.ts和對(duì)應(yīng)的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、為什么要導(dǎo)入WustModule，為什么要繼承BaseComponent？
（1）、WustModule管理了項(xiàng)目的公用服務(wù)，組件，指令，動(dòng)畫(huà)，設(shè)計(jì)WustModule的初衷就是為了封裝一個(gè)公用的組件包，這些組件類都是可以在其他ng項(xiàng)目中使用的，暴露出WustModule接口，你就可以使用WustModule中管理的所有公共組件，服務(wù)，指令，動(dòng)畫(huà)
（2）、BaseComponent里面封裝了一些所有模塊都有可能使用的公共方法，比如初始化配置的方法：getModuleConfig,翻譯的方法：tr,切換語(yǔ)言的方法：setLangPackage，子類繼承BaseComponent類，子類必須要繼承父類的構(gòu)造函數(shù)，由于父類構(gòu)造函數(shù)必須要傳入IbdCommonService的實(shí)例，所以需要
super(commonService)調(diào)用父類構(gòu)造函數(shù)，繼承了父類就可以使用父類里面的任何方法，在子類通過(guò)this.getModuleConfig()調(diào)用getModuleConfig()方法時(shí)，它會(huì)首先在子類對(duì)象里面尋找 getModuleConfig方法，如果子類沒(méi)有，就會(huì)順著原型鏈去父類里面尋找getModuleConfig方法，繼承也會(huì)繼承父類構(gòu)造函數(shù)依賴注入的實(shí)例對(duì)象，關(guān)于繼承不再多說(shuō)，如果你們有不懂得可以私密我，然后我總結(jié)一篇關(guān)于angular2+的繼承理解（有錯(cuò)歡迎各路老司機(jī)指正，此處斜眼笑），es6繼承請(qǐng)查閱阮一峰老師的es6標(biāo)準(zhǔn)入門-class繼承篇（3）、以下展示W(wǎng)ustModule包所在的目錄
（4）、以下展示wust-module.ts文件代碼
（5）、以下展示base-component.ts代碼
六、我想說(shuō)
1、由于我目前的公司是將所有的模塊打成了私有npm包，然后發(fā)布到私有npm服務(wù)器上，所以你可能看到代碼中有些地方寫的
@topibd/xxx請(qǐng)不要一味照搬，須理解代碼后使用，@topibd/xxx請(qǐng)更換為對(duì)應(yīng)模塊的文件夾目錄2、有問(wèn)題指正或者技術(shù)交流歡迎留言郵箱：1055120207@qq.com， 謝謝！
