标签：

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

http://lewis617.github.io/angular2-tutorial/hellowold/

例子

这个例子非常简单，是个双向数据绑定。

运行方法：

全局安装http-server

npm install -g http-server

公共部分

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

1.index.html

2.lib

3.app/main.ts

还有一个文件需要部分修改：

app/app.ts

这个文件必须导出app组件

lib简介

    <script src="lib/es6-shim.min.js"></script>
    <script src="lib/system-polyfills.js"></script>
    <script src="lib/shims_for_IE.js"></script>

前三个文件是IE的polyfill，其他浏览器不需要
    <script src="lib/angular2-polyfills.js"></script>包含了zone和reflect-metadata

zone告诉angular2何时更新视图。还记得ng1中脏检查以及$apply吧，zone就是来取代他们的。
    <script src="lib/system.js"></script>
    <script src="lib/typescript.js"></script>
    <script src="lib/Rx.js"></script>

这三个文件分别用于模块系统，ts编译和响应式编程。
    <script src="lib/angular2.dev.js"></script>是ng2的库文件

组件

其实这个程序就一个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‘;
}

定义一个类，给它装饰一个组件。组件是什么？组件就是ng1中的指令，react中的组件，就是样子，看的见摸得着的东西。

ng2实在改进太多了，所有的东西，包括组件、服务、过滤器等都是一个类，然后用各自相关的@装饰器装饰下就ok了，非常简单明了。

模板语法

我们先来感受下ng2的模板语法，后面我会单独拿出来讲这个知识点。

值得高兴的是{{}}依然存在。

<h1>Hello, {{name}}!</h1>

ng-model变成了[value]，属性绑定用了[value]

<input [value]="name" (input)="name = $event.target.value">

事件绑定变成了(),里面是所有html5事件，比如click,input,hover等。ng2终于拥抱html5原生的方法了！

angular2系列教程（一）hello world

标签：

原文地址：http://www.cnblogs.com/chrisghb8812/p/5785333.html