刚练习的时刻用过AngularJS，那时刻真的是连原生JavaScript都不会写，依样画葫芦做了几个治理背景。然后倏忽换项目了，AngularJS就不写了，认为前前后后打仗了一年多的AngularJS，效果只懂点外相。
近来又有个治理背景的需求，决议再拾起，但如今是升级版的Angular了。终究，有时机好好再看一眼Angular了，此次希望能深切一点相识。
本文是笔者在进修开辟过程当中的总结输出，目标在于让初次打仗Angular的开辟者对该框架能有团体的熟悉，而且能疾速上手开辟事情。
AngularJS VS Angular
AngularJS最大版本号只需1.x，2.x/4.x的版本号都是针关于全新的框架Angular。但不能说Angular和AngularJS一点关联都没有，你看名字这么像，是吧？！回想一下AngularJS被人时刻不忘的特征，双向数据绑定，MVC，指令，效劳，过滤器，模块化，脏搜检机制，依靠注入，Scope，路由，表单校验等等。
看下AngularJS到Angular的过程当中，哪些观点被保留下来，哪些被剔除了（所谓的取其精华，去其糟粕）。
剔除的部份：
ng-controller指令：掌握器主假如营业逻辑的掌握部份
$scope观点：很壮大又很庞杂
数据双向绑定：数据双向流畅能够致使数据的震动（故才有最多搜检10次的限定，10次以后还不稳固就报错）
保留/改良的部份：
路由嵌套：AngularJS自带的路由体系是不能嵌套路由的，到了Angular你想怎样嵌套就怎样嵌套
过滤器（Filter）变成管道（Pipe），观点的变化
依靠注入机制：直接在组织器中注入，另有分层依靠注入的观点
指令写法：
(事宜) ng-click变成(click)
[属性] href = “{{}}”能够写成 [href]
[(ngModel)]替代之前的ng-model
*ngFor 替代 ng-repeat，不实用于对象，实用任何有Symbol.iterator属性的数据构造（能用for…of来接见），比方数组，鸠合等
*ngIf 替代 ng-if，去掉ng-show，ng-hide
对挪动端的支撑
模版，数据绑定，效劳，模块，脏搜检机制等
新增的部份：
组件化：Angular的中心地点
Typescript作为默许的开辟言语
ZoneJS监听一切（能够致使数据变化）的异步事宜
支撑效劳端衬着
Angular Cli
Angular团队为开辟者供应了一个开箱即用（out of the box）的脚手架东西：Angular Cli。我们再也不必忧郁在项目初始化时，要搭建设置一系列的东西，比方webpack，karma，tslint，protractor等。
操纵很简朴，只需运转以下命令行就搞定了。
详细的语法教程可参考这里。
装置以后，文件目次以下：
my-dream-app
e2e // 端到端测试
app.e2e-spec.ts
app.po.ts
tsconfig.e2e.json
node_modules/... // npm包
src/... // 源码
angular-cli.json // 设置项
.editorconfig // 编辑器设置
.gitignore // git疏忽文件设置
karma.conf.js // karma设置
package.json // npm设置
protractor.conf.js // 测试设置项
README.md // 项目申明
tsconfig.json // ts编辑器的设置
tslint.json // tslint设置项
我们须要关注的是src文件夹，这里寄存我们一切的源代码，开辟的时刻基础都在src中。
src
app // 代码的主要文件夹
app.component.css // 根组件款式
app.component.html // 根组件模版
app.component.spec.ts// 根组件测试
app.component.ts // 根组件剧本
app.module.ts // 根模块
assets // 静态资本
.gitkeep // 保留空文件夹
environments // 环境设置
environment.prod.ts
environment.ts
favicon.ico // 图标
index.html // 页面主进口
main.ts // 剧本主进口
polyfills.ts // 兼容阅读器
styles.css // 全局css款式
test.ts // 单位测试主进口
模块
Angular很主要的观点之一仍然是模块。Angular悉数框架就是由许多个模块构成的，而差别的模块须要从差别的处所导入。翻开package.json文件，能够看到依靠的angular包多是如许的：
"@angular/common": "^2.3.1",
"@angular/compiler": "^2.3.1",
"@angular/core": "^2.3.1",
"@angular/forms": "^2.3.1",
"@angular/http": "^2.3.1",
"@angular/platform-browser": "^2.3.1",
"@angular/platform-browser-dynamic": "^2.3.1",
"@angular/router": "^3.3.1",
来简朴看下这些angular包中包括了哪些经常运用的模块（最少如今为止，我认为经常运用的）。
@angular/core：这里包括了许多经常运用的模块
NgModule：模块定义装潢器
Component：组件定义装潢器
Directive：指令定义装潢器
Pipe ：管道定义装潢器
PipeTransform：管道接口
Injectable：效劳定义装潢器
ElmentRef：元素援用
ViewChild：猎取子元素
Render：衬着
Input：吸收参数输入
Output：事宜输出
EventEmitter：触发自定义事宜
@angular/common
CommonModule：通用模块，包括内置指令ngIf，ngFor
@angular/forms
FormsModule：定义模版驱动表单
ReactiveFormsModule：定义响应式表单
FormGroup, FormArray, FormControl, FormBuilder：响应式表单位素
Validators：表单校验
@angular/http
HttpModule：http要求模块
@angular/router
RouterModule 路由模块
Routes 路由数据构造
@angular/platform-browser
platformBrowser：AoT编译
BrowserModule：阅读器支撑，注重该模块导入了CommonModule，然后导出去，所以援用了这个模块也就援用了CommonModule
@angular/platform-browser-dynamic
platformBrowserDynamic：JIT编译
以上模块都是Angular框架中的自带模块，而我们开辟的完全单位也是模块。一个运用中最少要有一个模块，也就是根模块。 一些同享的功用属性我们能够笼统出来，成为同享模块。然后就是一些特征模块了。
模块的构成由组件，效劳，指令，管道等等构成，这些观点会在下面讲到。定义模块的语法以下：
@NgModuel({
declarations: [], // 用到的组件，指令，管道
providers: [], // 依靠注入效劳
imports: [], // 导入须要的模块
exports: [], // 导出的模块，跨模块交换
entryComponents: [] // 需提早编译好的模块
bootstrap: [] // 设置根组件
})
export class AppModule { }
一切用到的组件，指令，管道，模块都须要事先在模块中声明好，才在详细组件中运用。效劳能够在模块，组件，指令中的
providers声明，也能够直接在运转时供应（拜见Trotyl Yu的例子）。
平常状况下，在根模块的bootstrap中设置启动的根组件即可，但也能够动态处置惩罚（拜见Trotyl Yu的例子）。
那怎样启动根模块呢？
在进口剧本中，也就是Angular Cli项目中的main.ts中，启动以下：
// 导入须要模块
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// 根模块
import { AppModule } from './app/app.module';
// 编译启动模块
platformBrowserDynamic().bootstrapModule(AppModule);
至此，我们对模块有所相识，也知道了模块的定义。
组件
自从采纳组件化的React大火以后，如今市面上炙手可热的框架全都采纳了组件化的理念，Angular固然也不能落伍了。能够说，组件化是Angular的中心理念。按Angular在中国的布道者大漠穷秋的话来讲，就是：
Angular的中心观点是组件，模块化机制NgModule是为组件化效劳的，实际上一切别的机制都是缭绕组件化而来的。只需从组件化这个角度才把握Angular的精力内核。
组件一般都是由模版和营业逻辑构成，看一下怎样用Angular写一个很简朴的组件：
// hello.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'hello',
template: '<p> {{greeting}} </p>',
styles: [`p { color: red;}`]
})
export class HelloComponent{
private greeting: string;
constructor(){
this.greeting = 'Hello, Angular2!';
}
}
// 运用
<hello></hello>
// 衬着效果
<hello>
<p> Hello, Angular2! </p>
</hello>
定义类HelloComponent的时刻，加上装潢器@Component（Typescript语法），通知Angular这个类是组件类。内里的数据称之为元数据（metadata），selector属性申清楚明了该组件对外的运用标记，template就是组件的模版，styles是组件的款式。而HelloComponent中定义的就是该组件的营业逻辑了。
假如模版内容太多，能够零丁写在一个html文件中，用templateUrl属性引入；同理，款式文件用styleUrls引入。
组件性命周期
正如其他框架的组件，Angular的组件也是有性命周期这个观点。在差别的阶段差别的场景下，能够挪用差别的性命周期函数钩子（hook）。
constructor：组织器函数，平常用于注入效劳
ngOnChanges：检测到输入数据变化，初次触发发作在ngOnInit前。注重对象的属性发作变化时监听不到
ngOnInit：组件初始化，一般会设置一些初始值
ngDoCheck：手动触发更新搜检
ngAfterContentInit：内容初始化到组件以后
ngAfterContentChecked：内容变动检测以后
ngAfterViewInit：视图 初始化以后
ngAfterViewChecked：视图发作变化检测以后，这个能够用来保证用户视图的实时更新
ngOnDestroy：组件注销时的清算事情，通经常运用于移除事宜监听，退订可视察对象等
详细申明能够参考这里。
组件通讯
能够想像获得，组件化的页面构造最终会构成一颗组件树。盗一张Vue的图：
不可避免，我们须要斟酌父子组件之间的参数通报题目。Anuglar供应的通讯体式格局有以下几种：
父组件到子组件：父组件用属性绑定将值传入，子组件经由过程@Input来吸收。
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'hero-parent',
template: `<h2> heroes </h2>
<hero-child *ngFor="let hero of heroes"
[hero]="hero" >
</hero-child>
`
})
export class HeroParentComponent {
heroes = [{
name: 'John'
}, {
name: 'Lily'
}];
}
// 子组件
import { Component, Input } from '@angular/core';
import { Hero } from './hero';
@Component({
selector: 'hero-child',
template: `
<h3>{{hero.name}}</h3>
`
})
export class HeroChildComponent {
@Input() hero: Hero;
}
子组件到父组件：子组件自定义事宜用@Output传出，父组件用事宜绑定猎取。
// 子组件
import { Component, EventEmitter, Output } from '@angular/core';
@Component({
selector: 'my-voter',
template: `
<h4>{{name}}</h4>
<button (click)="vote(true)">Agree</button>
`
})
export class VoterComponent {
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) {
this.onVoted.emit(agreed);
}
}
// 父组件
import { Component } from '@angular/core';
@Component({
selector: 'vote-taker',
template: `
<h2>Should mankind colonize the Universe?</h2>
<h3>Agree: {{agreed}}, Disagree: {{disagreed}}</h3>
<my-voter *ngFor="let voter of voters"
[name]="voter"
(onVoted)="onVoted($event)">
</my-voter>
`
})
export class VoteTakerComponent {
agreed = 0;
disagreed = 0;
voters = ['Mr. IQ', 'Ms. Universe', 'Bombasto'];
onVoted(agreed: boolean) {
agreed ? this.agreed++ : this.disagreed++;
}
}
子组件援用：在父组件模版中增加对子组件的援用，即可经由过程该子组件去接见子组件的要领。
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>
@ViewChild()：相似的，也能够在剧本顶用@ViewChild()来猎取子组件
import { AfterViewInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'countdown-parent-vc',
template: `
<h3>Countdown to Liftoff (via ViewChild)</h3>
<button (click)="start()">Start</button>
<button (click)="stop()">Stop</button>
<div class="seconds">{{ seconds() }}</div>
<countdown-timer></countdown-timer>
`
})
export class CountdownViewChildParentComponent implements AfterViewInit {
@ViewChild(CountdownTimerComponent)
private timerComponent: CountdownTimerComponent;
seconds() { return 0; }
ngAfterViewInit() {
setTimeout(() => this.seconds = () => this.timerComponent.seconds, 0);
}
start() { this.timerComponent.start(); }
stop() { this.timerComponent.stop(); }
}
将数据保留在效劳中
@ngrx/store：拜见【译】手把手教你用ngrx治理Angular状况
模板与数据绑定
模版说白了就是html的内容，通例的html基础都是静态内容，而模版连系了框架中的新语法使得html动态化。来看看Angular中的模版有什么方便的语法：
插值绑定：双花括号
{{}}
我们能够看到上一节组件例子中的{{greeting}}就是插值绑定。不仅能够猎取变量的值，还能够直接写表达式。
属性（Property）绑定
<input [value]='myData'>
另有其他的，比方款式绑定：
<div [ngClass]="{special: isSpecial}"></div>
注重点：property和attribute不一样，想要绑定attribute，你须要写成property。比方：
<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>
你将会获得以下错误信息：
Template parse errors:
Can't bind to 'colspan' since it isn't a known native property
你须要改写成如许：
<tr><td [attr.colspan]="1 + 1">One-Two</td></tr>
// 或许
<tr><td attr.colspan="{{1 + 1}}">One-Two</td></tr>
事宜绑定
<input (keyup)='handle($event)' >
能够是原生的事宜：click，change，keydown，mousemove等，也能够是自定义事宜，也能够是指令事宜，比方ngSubmit。
双向绑定
<input [(ngModel)] = 'data'>
// 双向绑定的背地实际上是单向绑定和事宜触发，等价于下面
<input [ngModel]="data" (ngModelChange)="data=$event">
注重点：运用ngModel，须要引入FormsModule模块。
另有些内置的指令：
模版援用变量（# ／ ref-）
能够在元素上用#或许ref-前缀来标记这个元素，然后在其他处所援用。
<input #fax placeholder="fax number">
( <input ref-fax placeholder="fax number"> )
<button (click)="callFax(fax.value)">Fax</button>
*ngIf：掌握内容的有没有
<div *ngIf="show"> Can you see this? </div>假如另有else部份，能够以下操纵：
<div *ngIf="show; else elseBlock"> Can you see this? </div>
<ng-template #elseBlock> else block </ng-template>*ngFor：轮回
<div *ngFor="let hero of heroes; let i=index> {{i}}： {{hero.name}}</div>
详细的模版语法能够参考这里。
路由
一个模块有了多个组件以后，须要用路由来设置哪一个url显现哪一个组件。
起首，我们须要在进口页面的index.html中设置根途径：
...
<head>
<base href="/">
...
</head>
...
然后竖立一个路由模块：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
...
// 路由设置
const appRoutes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'heroes', component: HeroesComponent },
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
在主模块中导入设置好的路由模块：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
...
@NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
declarations: [
AppComponent,
HomeComponent,
HeroesComponent,
PageNotFoundComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
而在页面中须要一个容器 <router-outlet></router-outlet>去承载：
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Angular Router</h1>
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
<a routerLink="/heroes" routerLinkActive="active">Heroes</a>
</nav>
<router-outlet></router-outlet>
`
})
export class AppComponent { }
上面代码中的routerLink定义了用户点击后的路由跳转，routerLinkActive定义该路由激活时的款式类。
路由上还能够带上一些索引参数：
{ path: 'heroes/:id', component: HeroesComponent },
猎取的体式格局：
import { ActivatedRoute, Params } from '@angular/router';
...
export class a {
constructor(
private route: ActivatedRoute
) {}
// 路由参数
this.route.params
}
当模块许多，路由也许多的时刻，我们能够运用模块懒加载的体式格局。懒加载的体式格局也很简朴，在设置路由的时刻修正以下即可：
const routes: Routes = [
{ // 默许转到定单治理
path: '',
redirectTo: '/order',
pathMatch: 'full'
},
{
path: 'order',
loadChildren: './order/order.module#OrderModule'
},
{
path: 'warehouse',
loadChildren: './warehouse/warehouse.module#WarehouseModule'
},
{
path: 'statistics/sales',
component: SalesComponent
}
];
// 在子模块顶用RouterModule.forChild
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { OrderComponent } from './order.component';
const orderRoutes = [
{
path:'',
component: OrderComponent
}
];
@NgModule({
imports: [RouterModule.forChild(orderRoutes)],
exports: [RouterModule]
})
export class OrderRoutingModule {
}
效劳与依靠注入
效劳是什么观点？能够简朴地认为它是一个功用模块，主要在于它是单例对象，而且能够注入到其他的处所运用。
依靠注入是来自后端的观点，实在就是自动竖立一个实例，省去每次须要手动竖立的贫苦。
在Angular中定义一个效劳很简朴，主要在类之前加上@Injectable装潢器的功用。这是最常见的依靠注入体式格局useClass，其他详细拜见这里。
import { Injectable } from '@angular/core';
@Injectable()
export class Service {
counter: number = 0;
getData(){
return this.counter++;
}
}
然后在模块的providers中声明：
import { Service } from './service';
...
@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [ Service ], // 注入效劳
bootstrap: [...]
})
export class AppModule {
}
运用的时刻须要在组织器中竖立关联：
import { Component } from '@angular/core';
import { Service } from './service';
...
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public service: Service) {
// this.service被胜利注入
// 相当于 this.service = new Service();
// 然后能够挪用效劳
this.service.getData();
}
}
因为该效劳是在模块中注入，所以该模块中的一切组件运用这个效劳时，运用的都是同一个实例。
除了在模块中声明，还能够在组件中声明。假定AppComponent下另有组件HomeComponent，此时我们在AppComponent中注入这个效劳：
import { Component } from '@angular/core';
import { Service } from './service';
...
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ Service ], // 注入效劳
})
export class AppComponent {
constructor(public service: Service) {
// this.service被胜利注入
// 相当于 this.service = new Service();
// 然后能够挪用效劳
this.service.getData();
}
}
假如HomeComponent也运用了这个效劳，那它运用的将是同一个实例。这个能够从Service中的数据变化来看出。
Angular另有个分层依靠注入的观点，也就是说，你能够为任一组件竖立本身自力的效劳。就像上面的例子，假如想要HomeComponent不和它的父组件同运用一个效劳实例的话，只需在该组件中从新注入即可：
...
@Component({
selector: 'home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
providers: [ Service ], // 从新注入效劳
})
export class HomeComponent {
...
}
关于前后端的接口，一般会写成效劳。下面说下要求后端数据这块应当怎样写。在模块这节中提过，http有特地的HttpModule模块处置惩罚要求。起首要在模块中导入HttpModule，然后引入http效劳，挪用响应的要求要领即可。
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class HttpService {
constructor(private http: Http) {}
getFromServer():any {
return this.http.get(`/data`)
.toPromise()
.then(res => res.json())
.catch();
}
}
因为要求返回的对象是个可视察对象，能够转成Promise对象处置惩罚。这里须要用到RxJS的toPromise操纵符，然后用then去处置惩罚返回胜利效果，catch处置惩罚失利状况。如许就搞定了后端数据的要求了。
RxJS又是别的一个比较深邃的话题了，有时机深切进修一下再聊。
指令
Angular的指令观点跟AngularJS的指令差不多，最主要的区分在于Angular中的组件继续指令，算是特别的指令。我们看下用指令的体式格局去写组件的简朴例子：
import { Directive,Input,ElementRef } from '@angular/core';
@Directive({
selector: 'hello'
})
export class HelloDirective {
@Input() name: string;
constructor(private el: ElementRef) {}
public ngOnInit(): void {
this.el.nativeElement.innerText = `hello ${this.name}!`;
}
}
// 运用组件指令
<hello name="Yecao"></hello>
// 衬着效果
<hello> hello, Yecao! </hello>
不要忘记在运用前先在模块中声明哦，我认为这是Angular最烦人的一点。
除此之外，另有属性指令和构造指令，属性指令只转变元素的款式或许行动。要写成属性指令，须要在selector属性顶用[]包裹起来。来看简朴地例子：
import { Directive, ElementRef, Renderer2 } from '@angular/core';
@Directive({
selector: '[highLight]'
})
export class HighLightDirective {
constructor(private el: ElementRef, private renderer2: Renderer2) { }
ngAfterViewInit() {
this.renderer2.addClass(this.el.nativeElement, 'highlight');
}
}
// 运用属性指令
<p highLight> 这一段会高亮显现 </p>
构造指令就是模板中提到的ngIf，ngFor等指令，它修正了DOM构造。举个例子，重写*ngIf：
import { Directive, Input, ViewContainerRef, TemplateRef } from '@angular/core';
@Directive({
selector: '[myIf]'
})
export class MyIfDirective {
constructor(private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef) { }
@Input() set appMyIf(condition: boolean) {
if (condition) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
// 运用构造指令
<p *myIf="false"> 这一段不会显现 </p>
管道（过滤器）
管道实在就是过滤器，就是叫法不一致罢了。主要用于格式化源数据，而不转变源数据。定义和运用的体式格局也很简朴：
import { Pipe, PipeTransform } from '@angular/core';
/*
* 定单作废状况：默许为ALL示意悉数，CANCEL示意已作废，NOTCANCEL示意一般
*/
@Pipe({ name: 'cancelStatus' })
export class CancelStatusPipe implements PipeTransform {
transform(status:string, blank: boolean):string {
const map = {
"ALL": "悉数",
"NOTCANCEL": "一般",
"CANCEL": "已作废",
"": "暂无",
}
return blank? '特别状况': map[status];
}
}
运用前记得在模块的declarations声明，或许导到同享模块，在同享模块中导出去。运用以下：
{{ "ALL" | cancelStatus }} // 悉数
{{ "ALL" | cancelStatus: true }} // 特别状况
Angular内置了一些管道：
// 日期 DatePipe
{{ expression | date:"MM/dd/yy" }}
// 数字 DecimalPipe,digitInfo的构成 {minIntegerDigits}.{minFractionDigits}-{maxfractionDigits}
// minIntegerDigits：整数部份保留最小的位数，默许值为1.
// minFractionDigits：小数部份保留最小的位数，默许值为0.
// maxFractionDigits：小数部份保留最大的位数，默许值为3.
{{ expression | number[:digitInfo] }}
// 大写
{{ expression | uppercase }}
// 小写
{{ expression | lowercase }}
后语
因为篇幅的限定，Angular的每一个特征都点到为止，只是讲了一些基础观点和运用要领（我也只会这点罢了），让你在项目中会用。另有一块项目中肯定会用到的是表单及其校验，这是个大头，照样放在下一篇零丁拎出来讲吧。
假如你看到了这里，谢谢你花了那么多时候阅读。近来刚淘了视频，出自这里。 跟人人分享一下，链接: http://pan.baidu.com/s/1c2CGkVY 暗码: xwg6。
团体来讲，打仗Angular2不到一个月的时刻，如今项目开辟中。简朴说下我的进修途径：
大抵阅读了下有关Angular2的文章，跟Angular1的比较，有个大致的印象
看参考资料中的几个视频教程，我认为蛮不错的，让我对Angular2有个团体的观点
参考官网教程做了一下好汉展现板的例子
最先上手开辟，边开辟边去看文档
开辟的时刻能够尝试一些新的知识点，比方多模块，同享模块，路由懒加载，自定义表单考证指令，响应式表单，ngrx状况治理等等
总结输出，也就是如今在写的这边博客
参考资料
本文首发于野草园，转载请说明出处。不当之处，迎接批评指正！
