//原文地址 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
分享到：
相关推荐
Angular 2环境搭建到快速上手,原来自己花费大量时间需要搭建服务环境，现在可以按步照班，快速搭建环境，快速上手
你可能会问：Angular 的文章到处有，网上一大片，我为什么要来读你这个系列文章？ 这是非常好的一个问题，说明你对阅读内容有质量要求。 如果是我，我也会问这个问题。...2. 我会帮你扫平日常开发中常见
He has developed numerous such projects, including AngularJS 1.x and Angular 2 style guides, angular2-seed, a static code analyzer for Angular 2 projects, aspect.js, angular-aop, and many others....
Angular快速上手，里面包含环境搭建、Angular工程搭建、模块讲解；一些代码和插件、路由使用
angular2文档，We developed this book to be used as course material for Rangle's Angular 2 training, but many people have found it to be useful for learning Angular 2 on their own. This book will cover...
Angular 2 introduces an entirely new paradigm of applications. It wholly embraces all the newest concepts that are built into the next generation of browsers, and it cuts away all the fat and bloat ...
angular2快速脚手架，使用webpack进行编译
angular2工程搭建 一、编译和运行环境搭建 1、node.js和npm安装 a、下载地址：https://nodejs.org/en/download/ b、通过node -v 和 npm -v检查是否正确安装 c、下载工程： 略 d、进入工程目录 cd ...
angular2 最新教程（全网首发），并非ng-book2，此文件为PPT文件，原版为英文后来翻译过来，希望能帮助大家，如有翻译有误之处望大家谅解！！
angular2-datatable, 带有排序和分页的Angular2简单表组件 table 组件，具有对Angular2进行排序和分页的功能 演示在plunker中检查实时演示安装npm i -S angular2-datatable用法示例AppModule.ts
Work your way through every aspect of app development using Angular2 Understand the inner workings of Angular's view templating and data-binding capabilities Work on HTML forms and learn the Angular ...
揭秘angular2 中文pdf电子版是一本专业的angular技术书籍，图文清晰，结构明朗，该书覆盖angular基础、架构以及技术应用等各方面知识，内容非常详细，有兴趣的朋友欢迎前来下载！
this is angular2
网络搜集资源，想了解angular2发展，及入门学习的可以作为不错的读物
Why Angular2 Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？
angular2-registration-login-example, Angular 2/5 用户注册和登录示例 angular2-registration-login-exampleAngular 2/5 用户注册和登录示例&教程要查看演示和进一步详细信息，请访问 ...
Angular2权威教程--PDF 清晰版的ngBook --> Angular2权威教程--PDF
Angular 2 Components 英文mobi 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
本文档是 文字版 的angular2教程。所以可以很方便的做笔记和摘录。angualr2跟angualrJS相差非常大，和后面版本的angular是同一套基础，所以尽管不是最新的angular7，但是同样可以作为教程学习。
Angular 2 中文文档,还不错，可以作为参考。Angular 2 中文文档,还不错，可以作为参考。