2016-02-15

Angular2 系列教程（一）hello world

今天我们要讲的是Angular2 系列教程的第一篇，主要是学习Angular2的运行，以及感受Angular2的Components以及模板语法。

例子

这个例子非常简单，是个双向数据绑定。我使用了官网上最简单的方法来启动这个程序，并且去除 CDN 使用本地加载，保证长期可以运行（因为文件都在本地，我们不用担心版本更新的问题。）

运行方法：

全局安装http-server

1	npm install -g http-server

在根目录（hellowold）运行服务

1	http-server

根据提示打开相应的端口（一般是8080）。

也可以直接看我的github pages 。

公共部分

公共部分就是你可以直接复制粘贴拿去用的部分，包括

index.html
lib（文件夹以及里面所有的js文件）
app/main.ts

这些文件都是完全不用修改的，还有一个文件需要部分修改：

app/app.ts

这个文件必须导出App组件。其他文件都是需要自己编写的。

lib简介

前三个文件是ie的polyfill，其他浏览器是不需要的
- <script src="lib/es6-shim.min.js"></script>
- <script src="lib/system-polyfills.js"></script>
- <script src="lib/shims_for_IE.js"></script>
第四个文件包含了zone和reflect-metadata。zone告诉angular2何时更新视图？还记的ng1的脏检查以及$apply吧，zone就是用来取代这些恶心的东西的！reflect-metadata也是为了使用 ES7风格的装饰器准备的，就像@Component 和 @View 。这在ng2里面重度使用！
- <script src="lib/angular2-polyfills.js"></script>
这三个文件分别用于模块系统、ts编译、响应式编程（增强处理异步的能力）
- <script src="lib/system.js"></script>
- <script src="lib/typescript.js"></script>
- <script src="lib/Rx.js"></script>
最后是ng2的库文件
- <script src="lib/angular2.dev.js"></script>

组件

其实这个程序就一个ts文件，还特别短！

app/app.ts

import {Component} from 'angular2/core';  
  
@Component({  
    selector: 'app',  
    template: `  
        <h1>Hello, {{name}}!</h1>  
        Say hello to: <input [value]="name" (input)="name = $event.target.value">  
    `  
})  
export class App {  
    name: string = 'World';  
}