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包含路由很大的情况，根据配置来就好了。这种框架的路由都是类似的。

辛苦了，mark一下。