关于angular1与angular2的应用区别
angular1.0的这些繁杂的api，还有它的执行速度，运行效率，学习曲线，都被人吐槽，最近一直在用ng1，实在很想吐槽。
最近写ng2的项目，写了一些ng2基础的应用（包括angular-cli，路由，表单验证，组件通信，ajax，服务／指令，lazyload）demo，地址在->点我
学了一下angular2，看它有什么区别呢？
我就不复述网上一堆的对比言论了，我仅仅对我项目里用到的一个点来进行阐述。
有个需求就是一个radio对应一个input标签，比如有两对。
我需要选中1的时候传输1的value，选中2的时候传2的vaule。当选中1,2的input必须置空，选中2的时候1可以有值。还需要拿到数据以后还能显示回这个页面。
ng1做的时候要radio俩ngModel，input俩ngModel，你需要判断radio是不是被选中。input的ngModel就不用管了。（好的办法是用事件代理，这样在传输数据没问题，很简单，数据回显的时候就要根据数据推radio的选中情况了，不操作dom的情况下还需要加ngModel，不过也是没办法的事，不然改交互好了）
重要的一点是你必须$watch radio对应ngModel，如果没被选中，那2框置空。。坑的是如果我有好几个表单，我需要循环表单$watch！！！！坑死了。性能超差。（因为可能在代码里修改radio对应的ngModel来手动完成radio的唯一性，不然也不需要watch，事件代理也一样坑，回显的时候也必须手动维护一个数组来模拟radio的原生特性，但是可以避免$watch，因为发送请求数据不需要radio的状态，所以正在强烈建议重构这个页面）
开始ng2-----------------------------------------------------------------
ng2一个好的点就是ngModel的转变，它做的很棒的一点是单项绑定和双向绑定的选择，ngModel也是。（）是数据到模板的绑定，[ngModel]是模板到数据的绑定。
ng2有Attribute, Class, and Style 绑定，Event Binding。而且都是可以拼接字符串或者在binding里面写表达式，甚至是函数，比如：
ckass(){
return " abc dec"
}
<input type="text" #spy1 [ngClass]="'hahaha'+ckass()" />
想用的心已经蠢蠢欲动了。。
普通的双向绑定如ng1是这样写
<input type="text" [(ngModel)]="input" />
重要的是它可以拆开：
<input type="checkbox" [ngModel]="input" (ngModelChange)="handleChange()"/> {{ input }}
（ngModelChange）是啥，它里面可以随便写吗？
答案是不能。借用雪狼大叔的翻译：安利一下angular.live
ngModelChange并不是<input>元素的事件。 它实际上是一个来自ngModel指令的事件属性。 当Angular在表单中看到一个[(x)]的绑定目标时， 它会期待这个x指令有一个名为x的输入属性，和一个名为xChange的输出属性。
双向绑定的指令都会有一个xxChange的属性，它可以修改绑定。比如我们给它加个条件，如果radio选中了，就可以绑定啦， 不然你就是空吧。
<button class="batton" (click)="handleClick($event)"> click me</button> <input type="checkbox" [ngModel]="input" (ngModelChange)="handleChange()"/> <input type="text" [(ngModel)]="input" [disabled]="!check" /> {{ input }}
export class AppComponent { check = false; handleChange(){ this.check = !this.check; if(!this.check) { this.input = ""; } } handleClick(e: any) { this.check = false; } }
这里留一个button来解决程序修改radio状态的问题。可以看到，我们的handleChange其实就做了一个手动绑定的工作。如果没选中给置空。
运行你会发现，点击click me，input的内容并木有置空，因为radio的修改不是模板到数据的过程，是数据到模板的过程。
没关系，[ngModel]的单项绑定仍然可以自己控制，比如：
@Component({ selector: 'my-app', template: ` <button class="batton" (click)="handleClick($event)"> click me</button> <input type="checkbox" [ngModel]="handleCheck()" (ngModelChange)="handleChange()"/> <input type="text" [(ngModel)]="input" [disabled]="!check" /> {{ input }} `, styles: [``] })
又来了个handleCheck，这是ng1的ngModel不能搞定的。反正不支持处理函数。
那ng2咋写：
export class AppComponent { check = false; handleCheck(){ if (!this.check) { this.input = ""; } } handleChange(){ this.check = !this.check; if(!this.check) { this.input = ""; } } handleClick(e: any) { this.check = false; } }
我们在数据到模板的绑定只需要判断是否选中就可以了，这样就避免了$watch。
还有一些表达方式的不一样，主要是因为都换成ts了，一些类似es6的语法都开始发挥作用。
1.模块注入
因为es6的语法，去掉了ng1的依赖注入，改为模块化的注入，import语法
import { Component } from '@angular/core';
export class AppModule { }
2.模块化
由于ng2的模块化，原本模块化不那么明显的ng1的语法要改变很多，模块都作类，新增了注解语法，
@Component({ selector: 'hero', templateUrl: 'component.html' }) export class HeroFormComponent { ... }
Component注解规定了这个模块的selector，和模板template，然后把这个类做控制器。
3.数据展示
基本类似ng1，双花括号的展示方式
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}
只是模板选择器写在了注解里，控制器为此类。
然后这个类就可以做为一个模块使用，其实就是ng1的组件型指令
<my-app>loading...</my-app>
另外，template里的一些自带指令也是类似ng1，只是写法不同，除了上面写的绑定意外，再说一个ngFor
template: ` <h1>{{title}}</h1> <h2>My favorite hero is: {{myHero}}</h2> <p>Heroes:</p> <ul> <li *ngFor="let hero of heroes"> {{ hero }} </li> </ul> `
就是类似ng-repeat的作用了。只是换了个语法，看文档就好了。
4.dom事件
为了使键盘事件比较方便，然后自己封装进了ng2，vue已做此工作
<input #box (keyup.enter)="update(box.value)" (blur)="update(box.value)">
其余的事件都是类似的，带有（）括号的单向绑定。
5.服务
服务也有点差距，注入和声明有点不同，此为声明
import { Injectable } from '@angular/core';
@Injectable()
export class HeroService {
...
}
当 TypeScript 看到@Injectable()装饰器时，就会记下本服务的元数据。 如果 Angular 需要往这个服务中注入其它依赖，就会使用这些元数据。
使用服务首先引入服务
import { HeroService } from './hero.service';
然后需要在注解里注册一下
providers: [HeroService]
然后在这个类中就可以使用这个服务了
export class AppComponent implements OnInit { title = 'Tour of Heroes'; heroes: Hero[]; constructor(private heroService: HeroService) { } getHeroes(): void { this.heroService.getHeroes().then(heroes => this.heroes = heroes); } ngOnInit(): void { this.getHeroes(); } }
6，生命周期
ng2增加了很多生命周期，如上面的ngOnInit等等，都是ng1没有的，就不介绍了
7，http
跟ng1类似ng2也是封装了ajax到http，不同的是现在的ng2可以用rxjs了。。rxjs好像贵族的东西，用的人很少，学习成本不低，但是好用。ng2的http不是封装的promise了，而是简化的rx的Observable，需要subscribe来执行他的请求。也可以引入rx的toPromise，然后then下去就可以了。有点强破推销的意思。
8.管道
其实就是ng1的filter。
import { Pipe, PipeTransform } from '@angular/core';
/*
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
* Usage:
* value | exponentialStrength:exponent
* Example:
* {{ 2 | exponentialStrength:10}}
* formats to: 1024
*/
@Pipe({name: 'exponentialStrength'})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}
@Pipe装饰器告诉Angular：这是一个管道，管道类实现了PipeTransform接口的transform方法，该方法接受一个输入值和一些可选参数，并返回转换后的值。transform方法返回就处理后的值。
9.路由
路由配置没什么说的，跟着文档一步步来就好了，由于是import的引入，不存在ng1包含路由很大的情况，根据配置来就好了。这种框架的路由都是类似的。
10. 组件交互
ng1现在都忘记了，主要说一下ng2的组件交互。
父传子的交互方式是靠props来传递的，这点跟react一样了，子组件的状态是纯靠输入，这是material的分页组件，在子组件里需要用装饰器来取，@input。下面例子就有
<md-paginator #paginator
[length]="xxx"
[pageIndex]="0"
[pageSize]="10"
[pageSizeOptions]="[10]">
</md-paginator>
子传父组件是不建议的，但也有很多需求，比如打开一个子组件做modal，然后modal关闭的时候回传给父组件数据，对于react的方案一个是redux，另一个包括ng1也在用的就是事件系统。都有各自的事件系统，
但是ng2的事件系统最为强大，因为它是rxjs。
这里给一个例子：subject就是rxjs的对象。关于rxjs的介绍另有博文：rxjs-流式编程
@Component({ selector: 'wap', template: '<app-add-warp [subject]="subject" ></app-add-warp>' }) export class addWarpComponent { subject = new Subject(); constructor() { this.subject.subscribe({ next: (v) => console.log(v) }); }; }
@Component({ selector: 'app-add', templateUrl: './add.component.html', styleUrls: ['./add.component.scss'] }) export class AddComponent implements OnInit { @Input('subject') cbSubject:Subject<any>; constructor() { } ngOnInit() { this.cbSubject.next(this.user); } } }
subscribe就是触发事件要执行的东西，next方法就是触发事件的点。
