手把手教你如何开始一个angular模块

友情提示：图片看不清请点击鼠标右键，查看图像

一、安装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/app

2、执行 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、有问题指正或者技术交流欢迎留言邮箱：[email protected]， 谢谢！