手把手教你如何开始一个angular模块
友情提示：图片看不清请点击鼠标右键，查看图像 一、安装SVN（或者git）
1、下载小乌龟工具（SVN工具），百度搜索SVN即可
2、打开SVN安装包，一路next默认安装即可
二、从公司SVN （或者git）上面拷贝公司目前的前端代码
1、打开文件资源管理器选择开发目录，点击鼠标右键弹出 menu提示框，选择 SVN
2、URL of : 填入公司SVN地址
3、 : 开发目录路径
三、进入开发环境，新建模块
1、打开文件资源管理器，进入开发目录，以脚手架目录为例就是：项目文件夹/src/app
2、执行 ng g c 模块名 新建模块的文件夹,更多ng-cli快捷操作请访问 -cli 地址
3、执行 ng g m 模块名 新建模块的文件（文件作为业务模块的入口，管理和其他组件，，指令，服务的关系）
4、选择新模块文件夹，右键点击添加新文件，命名为 模块名..ts，并在test..ts元数据的属性里面引入该路由类（即），该文件为新模块的路由配置文件，该文件可以配置子路由，用于路由到该模块的子模块，下面是新建模块文件夹格式
5、这里以test模块为例写一个test..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..ts 文件，添加链接到新模块的路由，具体见下面代码
下面展示main模块的html模板：.html
这里顺便展示一下根路由app..ts和对应的html模板.html
.html模板如下：
app..ts模板如下：
五.引入模块依赖的基类 1、模块.ts里面引入,这里以为例子
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、模块.ts里面继承基类
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、为什么要导入，为什么要继承？
（1）、管理了项目的公用服务，组件，指令，动画，设计的初衷就是为了封装一个公用的组件包，这些组件类都是可以在其他ng项目中使用的，暴露出接口，你就可以使用中管理的所有公共组件，服务，指令，动画
（2）、里面封装了一些所有模块都有可能使用的公共方法，比如初始化配置的方法：,翻译的方法：tr,切换语言的方法：，子类继承类，子类必须要继承父类的构造函数，由于父类构造函数必须要传入的实例，所以需要 super() 调用父类构造函数，继承了父类就可以使用父类里面的任何方法，在子类通过 this.() 调用()方法时，它会首先在子类对象里面寻找 方法，如果子类没有，就会顺着原型链去父类里面寻找方法，继承也会继承父类构造函数依赖注入的实例对象，关于继承不再多说，如果你们有不懂得可以私密我，然后我总结一篇关于+的继承理解（有错欢迎各路老司机指正，此处斜眼笑），es6继承请查阅阮一峰老师的es6标准入门-class继承篇
（3）、以下展示包所在的目录
（4）、以下展示wust-.ts文件代码
（5）、以下展示base-.ts代码
六、我想说
1、由于我目前的公司是将所有的模块打成了私有npm包，然后发布到私有npm服务器上，所以你可能看到代码中有些地方写的 @/xxx 请不要一味照搬，须理解代码后使用，@/xxx 请更换为对应模块的文件夹目录
2、有问题指正或者技术交流欢迎留言邮箱：， 谢谢！
