angular2快速上手翻译
//原文地址 https://angular.io/docs/js/latest/quickstart.html zhuhq
//可以直接访问 http://note.youdao.com/share/?id=9c261638549621b6bee122df614f44fc&type=note 排版好点
Angular2还处于测试阶段,请勿用于生产环境！ 这个快速上手教程以后可能会改变仅提供给想尝鲜的同学。
1. 新建工程
我们要用angular在页面上显示“Hello Alice”. 首先我们新建目录angular2_quickstart并进入这个目录
mkdir angular2_quickstart
cd angular2_quickstart
2. 从githup下载quickstart项目
从githup clone quickstart项目，这个项目中包含了我们需要的一些文件，这样我们就不需要自己再去单独整合这些文件:
git clone https://github.com/angular/quickstart.git
名词解释ES6, AtScript, es6-shim
AtScript
Angular是用AtScript写的，AtScript是基于ES6扩展的语言.我们将用这门语言编写quickstart，当然你也可以用ES6或ES5编写angular程序。
ES6
AtScript会被编译成ES6在浏览器中执行，还有很多浏览器不支持ES6，所以我们提供了es6-shim。
es6-shim
es6-shim提供ES6转ES5，从而可以让不支持ES6的浏览器可以运行ES6编写的程序
3. 引入angular JS
在项目根目录下新建俩个文件index.html 、app.es6:
touch index.html
touch app.es6
如果你的编辑器不支持.es6扩展名，可以用.js
在app.es6中, 引入需要的Angular模块:
import {Component, Template, bootstrap} from 'angular2/angular2';
这条语句使用ES6语法引入了3个Angular 模块，这些模块会在运行时被加载。
4. 定义组件
本实例会定义一个在页面中可以用<my-app>这种HTML标签形式使用的组件.
组件包含俩个部分：声明部分和组件控制器.
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
组件声明
组件声明可以用来配置组件的元信息.
@Component（以CSS选择器的方式）声明这个组件可以用<my-app>HTML标签形式使用.
@Template 以行内方式声明这个组件使用的渲染模板，当然你也可以以提供模板url的方式使用模板.
@Component({
selector: 'my-app' // Defines the <my-app></my-app> tag
})
@Template({
inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
})
上面的代码声明了一个使用<my-app>标签 ，模板为 <h1>Hello {{ name }}</h1>的组件.
模板和组件控制器
控制器操作模板. 下面用ES6 class语法编写一个控制器.
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
模板从模板控制器中读取数据，模板可以访问控制器的属性和方法。
模板中以”{{. .}}“方式访问控制器中的属性，如我们定义的模板中 {{name}} 即是访问控制器的name属性，当模板渲染时会{{name}}会被替换为‘Alice’ .
5. 启动
在app.es6的底部调用 bootstrap() 方法把我们新定义的组件MyAppComponent加载到页面:
bootstrap(MyAppComponent);
6. 编写Html
在index.html的head部分引入es-shim.js文件. (es6-shim.js文件必须在应用文件加载前加载.)，然后在body部分 输入< my-app></my-app>.
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="/quickstart/dist/es6-shim.js"></script>
</head>
<body>
<!-- The app component created in app.es6 -->
<my-app></my-app>
</body>
</html>
7. 加载组件
最后一步是加载需要的组件.我们使用 System library加载（在quickstart中已经有了） .
System.js
System是一个提供ES6模块化加载支持的开源JS库.
在index.html加入模块加载代码:
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'/quickstart/angular2/*.js', // Angular
'rtts_assert/*': '/quickstart/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
8. 启动Http服务器
启动http服务器，访问index.html页面.
如果你还没有http服务器，可以使用http-server 安装方式： npm install -g http-server. （需要有Node JS环境）
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html
//可以直接访问 http://note.youdao.com/share/?id=9c261638549621b6bee122df614f44fc&type=note 排版好点
Angular2还处于测试阶段,请勿用于生产环境！ 这个快速上手教程以后可能会改变仅提供给想尝鲜的同学。
1. 新建工程
我们要用angular在页面上显示“Hello Alice”. 首先我们新建目录angular2_quickstart并进入这个目录
mkdir angular2_quickstart
cd angular2_quickstart
2. 从githup下载quickstart项目
从githup clone quickstart项目，这个项目中包含了我们需要的一些文件，这样我们就不需要自己再去单独整合这些文件:
git clone https://github.com/angular/quickstart.git
名词解释ES6, AtScript, es6-shim
AtScript
Angular是用AtScript写的，AtScript是基于ES6扩展的语言.我们将用这门语言编写quickstart，当然你也可以用ES6或ES5编写angular程序。
ES6
AtScript会被编译成ES6在浏览器中执行，还有很多浏览器不支持ES6，所以我们提供了es6-shim。
es6-shim
es6-shim提供ES6转ES5，从而可以让不支持ES6的浏览器可以运行ES6编写的程序
3. 引入angular JS
在项目根目录下新建俩个文件index.html 、app.es6:
touch index.html
touch app.es6
如果你的编辑器不支持.es6扩展名，可以用.js
在app.es6中, 引入需要的Angular模块:
import {Component, Template, bootstrap} from 'angular2/angular2';
这条语句使用ES6语法引入了3个Angular 模块，这些模块会在运行时被加载。
4. 定义组件
本实例会定义一个在页面中可以用<my-app>这种HTML标签形式使用的组件.
组件包含俩个部分：声明部分和组件控制器.
// Annotation section
@Component({
selector: 'my-app'
})
@Template({
inline: '<h1>Hello {{ name }}</h1>'
})
// Component controller
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
组件声明
组件声明可以用来配置组件的元信息.
@Component（以CSS选择器的方式）声明这个组件可以用<my-app>HTML标签形式使用.
@Template 以行内方式声明这个组件使用的渲染模板，当然你也可以以提供模板url的方式使用模板.
@Component({
selector: 'my-app' // Defines the <my-app></my-app> tag
})
@Template({
inline: '<h1>Hello {{ name }}</h1>' // Defines the inline template for the component
})
上面的代码声明了一个使用<my-app>标签 ，模板为 <h1>Hello {{ name }}</h1>的组件.
模板和组件控制器
控制器操作模板. 下面用ES6 class语法编写一个控制器.
class MyAppComponent {
constructor() {
this.name = 'Alice';
}
}
模板从模板控制器中读取数据，模板可以访问控制器的属性和方法。
模板中以”{{. .}}“方式访问控制器中的属性，如我们定义的模板中 {{name}} 即是访问控制器的name属性，当模板渲染时会{{name}}会被替换为‘Alice’ .
5. 启动
在app.es6的底部调用 bootstrap() 方法把我们新定义的组件MyAppComponent加载到页面:
bootstrap(MyAppComponent);
6. 编写Html
在index.html的head部分引入es-shim.js文件. (es6-shim.js文件必须在应用文件加载前加载.)，然后在body部分 输入< my-app></my-app>.
<!-- index.html -->
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="/quickstart/dist/es6-shim.js"></script>
</head>
<body>
<!-- The app component created in app.es6 -->
<my-app></my-app>
</body>
</html>
7. 加载组件
最后一步是加载需要的组件.我们使用 System library加载（在quickstart中已经有了） .
System.js
System是一个提供ES6模块化加载支持的开源JS库.
在index.html加入模块加载代码:
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*':'/quickstart/angular2/*.js', // Angular
'rtts_assert/*': '/quickstart/rtts_assert/*.js', //Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
8. 启动Http服务器
启动http服务器，访问index.html页面.
如果你还没有http服务器，可以使用http-server 安装方式： npm install -g http-server. （需要有Node JS环境）
# From the directory that contains index.html:
npm install -g http-server # Or sudo npm install -g http-server
http-server # Creates a server at localhost:8080
# In a browser, visit localhost:8080/index.html