//原文地址 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官网快速上手项目src压缩包，版本：同步翻译版V12.1.0，需要先安装angular开发环境，使用 CLI 生成新的应用后，将该src替换原来的src。温馨提示：通过官网StackBlitz在线项目生成模块后，需要手动在app....
通过这个Angular 2 QuickStart ES项目，开发者不仅可以学习Angular 2的基本原理，还能获得实际操作的经验，从而快速上手开发Angular 2应用。在Angular 2QuickStartES-master文件中，包含了完整的项目源码，可供学习...
总的来说，这门JavaScript入门教程旨在为初学者提供全面的编程知识和技能，无论是否有编程背景，都能通过实例驱动的方式快速上手。通过学习，学习者不仅能够理解JavaScript的基本概念，还能掌握实际应用中的开发技巧...
#### 三、快速上手 - **入门程序1**：实现一个实时记录用户键盘输入内容的功能。 - **传统方法**：通过监听键盘事件并手动更新DOM。 - **AngularJS方法**：利用数据双向绑定特性，通过`ng-model`指令直接在HTML中...
**AngularJS i18n 入门指南** ...通过理解并实践上述知识点，新手可以快速上手并掌握AngularJS的国际化功能。在实际开发中，还要关注性能优化和用户体验，确保应用在全球范围内都能提供优质的服务。
此 Starter Kit 可能包括了基本的架构、配置和示例代码，帮助开发者快速搭建一个支持离线功能的 Angular 应用。 【标签】"开源项目" 指的是这些资源都是开放源代码的，允许用户查看、使用、修改和分发代码。这意味...
**标题解析：** "angular-mean-template" 这个标题指的是一个基于 MEAN（MongoDB、Express.js、...通过这个模板，开发者可以快速上手 MEAN 开发，了解全栈 JavaScript 开发流程，并进一步学习和实践相关技术。
2. **API集成**: 它可能提供API接口，使得开发者可以轻松地将翻译功能整合到现有的Web应用中，无论是与后端服务通信还是与其他前端框架（如React、Vue或Angular）协作。 3. **多语言支持**: b28new.js应该内置了对...
这对于非英语母语的开发者来说是一个极大的便利，他们无需通过翻译工具就能快速上手。 在使用"中文汉化语言包"时，用户需要注意以下几点： 1. **兼容性**：确保汉化包与Aptana Studio Professional的版本相匹配，...
1. 文档：详尽的开发者文档和用户手册，帮助新用户快速上手，开发者理解源码结构。 2. 论坛：设立专门的技术论坛，解答问题，分享经验，促进开发者之间的交流。 3. 更新维护：定期更新修复bug，添加新功能，保持源码...
了解其使用的框架有助于开发者快速上手并进行二次开发。 2. **数据库管理**：整站程序通常会涉及数据库交互，如MySQL、PostgreSQL或MongoDB等。掌握其数据库结构和查询方式对于定制功能至关重要。 3. **模板引擎**...
TypeScriptHandbook同样介绍了如何通过快速上手篇快速开始使用TypeScript，并且提供了与多个流行的前端技术栈集成的指南，如*** Core、*** 4、Gulp、Knockout.js、React与webpack、React、Angular等，这展示了...
在TypeScript Handbook中，还有一些特定章节专注于向JavaScript开发者介绍如何快速上手TypeScript。这部分内容涵盖了TypeScript的基本语法、如何在现有的JavaScript项目中引入TypeScript、以及如何利用TypeScript的...
8. **学习资源**：对于初学者，CodeSandbox提供了丰富的学习资源和模板，可以帮助他们快速上手各种前端技术，而“milanproj”项目可能就是这样的一个实践案例。 9. **实时预览**：在CodeSandbox中，开发者可以实时...