ng2

• typescript
• angular

typescript是js的拓展，本质上在浏览器中运行的还是javascript，且编译完成后的js版本是es5，所以不存在兼容性问题。主要添加的概念大致有接口（interface）、类（class）、继承（extends）、箭头函数，将js包装得更像其他的后端语言的功能，这些类似于es6中的概念。ts中可以包含js代码，这部分代码不会被编译。ts中含有类型检查，也就是说可以为变量定制类型。接口可以作为定制类型（相当于面向对象中的实例化接口？）。

官网教程：
示例使用了typescript，js的一个超集。angular 使用typescript让程序员使用工具提高开发效率，你也可以使用js来写angular

注意：vue与react中模板最外层需要一个标签将组件整体包起来，ng2则不需要，可以利用es6中的模板字符串提高模板的可读性（主要是换行，保持代码缩进规范）

单向绑定

单向数据绑定的典型：{{}}插值
还可以为组件或者dom元素绑定属性或者事件

双向绑定

ng中的数据双向绑定由ngModel指令实现，需要从@angular/forms中导入FormsModule模块，从而使用其中的ngModel。

修饰器（decoration）

一般以@开头，如@Component()、@Injectable()、@NgModule()，有一些可以以传入一个对象作为配置数据，但其后都必须跟着一个普通的类，意味着将这个类修饰成对应的组件，依赖注入，模块等等。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

元数据(metadata)

上述例子中，配置对象中的属性都可以视为元数据，元数据告诉 Angular 如何处理一个类。

指令(directives)

可以通过@Directive()将指令元数据绑定到类上，指令可以通过添加元素属性的方式进行使用。当 Angular 开始渲染时，它会根据指令对 DOM 进行修改。类似ngIf与ngFor这类指令会直接影响到dom树的结构。组件作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。

<li *ngFor="let site of sites"></li>
<site-detail *ngIf="selectedSite"></site-detail>