AngularJS 大家应该不陌生了。Anguar 2 已经开始了 beta。是时候学学新东西。

官方网站：https://angular.io/

Angular 2 集合了 React、Ember、Typescript 的一些功能。

Angular 2 官方是推荐使用 Typescript 写 app。配合 SystemJS 动态模组加载器，或者用 webpack 捆绑多个文件。 用 Typescript 是有原因的，例如支持： @Annotations、ES6、ES7。官方是说 TypeScript 写的 app 比较容易明白。 当然，Angular2 是可以用 Javascript （ES5）、Dart 写。 目前，游览器是不完全支持 Typescript、ES6（开始支持一些）、Dart 的， 所以最终的文件还是编绘成 ES5 版的 Javascript (.js)。

支持 Web 标准

Web Components

• HTML Imports
• Templates
• Custom Elements
• Shadow DOM

ES6+

• Imports
• Classes
• Observables

去掉了 1.x 版本的

• Factory, Service, Constant
• ink, Compile, Controller
• $scope, ng-*

例子

AngularJS 的语法应该都很熟识

// angularjs
angular.module('app', [])
    .factory('myService', function(){ })
    .controller('myCtrl', function(){ })
    .directive('my-app', function(){ })
Js

Angular 2 的语法，看一下真的有点像 Java

// angular 2
import {bootstrap, Component} from 'angular2/angular2';

@Component({
  selector: 'my-app', // <my-app></my-app>
  template: '<h1>Hi {{ name }}</h1>'
})

// Component controller
export class MyAppComponent {
  this.name = "Hello World"
  constructor() { }
}

bootstrap(MyAppComponent);
Js

@Component

@Component + class xxx{} =

就是 Angular1 的 directive + template + controller

selector

CSS 选择器，选中的 HTML 代码则由 @Component 中 templates 的代码代替掉。

例如：

// tag
selector: 'my-app' // = <my-app></my-app>

// id
selector: '#app' // = <div id="app"></div>

// class
selector: '.app' // = <div class="app"></div>

// attribute
selector: '[app-go]' // = <div app-go></div>
Js

template

模板，类似 React 一样，可以写到 TS 文件里，或者用 templateUrl 引用外部文件。 由于 ES6 的语法可以支持 反引号(`) 模板字符串 (Template String)：

 // ES6
`string text ${expression} string text`

// ES5
"string text " + expression + " string text"
Js

Angular2 写模板整个流程变得简单很多。

@Component({
  selector: 'my-app', // <my-app></my-app>
  template: `
    <h1>{{title}}</h1>
    <li *ngFor="let user in User.list() | async">
        <p>{{user.name}}</p>
  `
})
// ....
Js

class

就是 app 的逻辑。可以有多个逻辑。相当于 Angular1 中的 directive controller。

像 Java 一样，class 可以有很多方法（methods）， 例如：

// Component controller
export class MyAppComponent {
  ...

  get() { ... }
  put(item) { ... }

}
Js

bootstrap

不是推特的那个前段 framework，这个是告诉 Angular 开始 app。 类似 Angular1 的 angular.bootstrap()。

angular2 入门项目

目前比较好、齐全的（也就是官方的），包含了开发需要的工具（webpack、gulp、一键安装），下载安装就可以开始动手开发了：

• webpack: https://github.com/AngularClass/angular2-webpack-starter
• systemjs: https://github.com/angular/angular2-seed/tree/systemjs
• angular-universal （伺服器渲染） https://github.com/angular/universal-starter/tree/master