5分钟快速入门angular2.0
让我们从零开始，在JavaScript中建立一个超级简单的角angular2.0的应用。
请看demo
<!DOCTYPE html> <html> <head> <title>Angular 2 QuickStart JS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- 1. Load libraries --> <!-- IE required polyfill --> <script src="https://npmcdn.com/core-js/client/shim.min.js"></script> <script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script> <script src="https://npmcdn.com/reflect-metadata@0.1.3"></script> <script src="https://npmcdn.com/rxjs@5.0.0-beta.6/bundles/Rx.umd.js"></script> <script src="https://npmcdn.com/@angular/core/bundles/core.umd.js"></script> <script src="https://npmcdn.com/@angular/common/bundles/common.umd.js"></script> <script src="https://npmcdn.com/@angular/compiler/bundles/compiler.umd.js"></script> <script src="https://npmcdn.com/@angular/platform-browser/bundles/platform-browser.umd.js"></script> <script src="https://npmcdn.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script> <!-- 2. Load our 'modules' --> <script src='app/app.component.js'></script> <script src='app/app.module.js'></script> <script src='app/main.js'></script> </head> <!-- 3. Display the application --> <body> <my-app>Loading...</my-app> </body> </html> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be found in the LICENSE file at http://angular.io/license -->
让我们从 0 开始创建一个简单的 Angular 2 应用。
下载任何版本的 angularjs, 访问：https://code.angularjs.org/
不想用 JavsScript 语言？
虽然我们这里使用 JavaScript, 你也可以使用 TypeScript，或者 Dart 来开发 Angular 2 应用。
我们将用 6 步完成
1. 创建项目文件夹
2. 安装基础库
3. 创建应用组件
4. 启动应用
5. 创建 index.html
6. 运行
1. 创建项目文件夹
创建一个新的文件夹来保存你的项目，应该类似下面的样子。
mkdir angular2-quickstart cd angular2-quickstart
2. 安装基础库
我们使用 npm package manager 来安装需要的开发库和开发工具。
angular2 - Angular 2 库
live-server - 一个静态文件服务器，可以在修改文件之后，自动重新加载到浏览器中。
我们既可以直接引用 Web 上的库，也可以下载项目中。
还没有安装 NPM？赶紧安装它，我们在这里将会不断使用这个工具。
打开终端窗口，输入下面的命令。
npm init -y npm i angular2@2.0.0-alpha.44 --save --save-exact npm i live-server --save-dev
这些命令将会创建名为 package.json 的项目文件，安装相应的软件包，现在的 package.json 看起来应该如下所示。
{
"name": "angular2-getting-started",
"version": "1.0.0",
"dependencies": {
"angular2": "2.0.0-alpha.44"
},
"devDependencies": {
"live-server": "^0.8.1"
}
}
还需要一个 scripts 的配置节，找到并替换为如下的内容, 在你的文件中可能根本就没有这个配置节, 那就加上好了.
"scripts": {
"start": "live-server"
}
我们使用它来扩展项目，以便运行脚本命令，很快就会用到。
3. 第一个 Angular Component
添加一个名为 app.js 的文件，输入下面的内容。
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
我们正在创建一个名为 AppComponent 的可视组件，通过使用全局的 ng 命名空间下的 Component 和 Class 方法来完成。
var AppComponent = ng
.Component({...})
.Class({...})
Component 方法需要一个包含两个属性的配置对象。selecter 属性告诉 Angular 需要控制名为 "my-app" 的元素。一旦遇到 my-app 元素，Angular 将会创建和显示 AppComponent 实例
template 属性定义了组件的可视外观。在这个示例中，我们使用了内联的模板，我们也可以把这个模板调整到一个模板文件中，然后通过 templateUrl 来关联模板文件的名称来使用它。
我们使用 Class 方法实现这个组件本身的内容，可以定义属性，方法并绑定到这个视图
现在的组件是一个最小化的实现，构造函数中没有内容。在以后的示例中，我们会看到很多有趣的内容。
4. 启动应用
我们需要在应用中做点什么，在 app.js 的最后，添加下面的内容。
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
我们等到浏览器通知我们说，内容已经加载完成了，然后再调用 bootstrap 方法。
bootstrap 方法通知 Angular 使用 AppComponent 作为应用的根来启动应用，
应该可以猜到, 在应用变得复杂的情况下, 我们会创建一个 Component 的树来完成复杂的工作.
Wrapped in an IIFE
我们不希望污染全局命名空间，但是,现在还不需要应用到命名空间，我们直接使用 IIFE ( Immediately Invoked Function Execution ) 来封装我们的代码。
(function() {
var AppComponent = ng
.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
.Class({
constructor: function () { }
});
document.addEventListener('DOMContentLoaded', function() {
ng.bootstrap(AppComponent);
});
})();
5. 创建 index.html
在项目文件夹中添加名为 index.html 的页面，内容如下：
<html>
<head>
<title>Angular 2 QuickStart</title>
<script src="node_modules/angular2/bundles/angular2.sfx.dev.js"></script>
<script src="app.js"></script>
</head>
<body>
<my-app></my-app>
</body>
</html>
在 head 中，我们的应用加载了两个脚本
angular2.sfx.dev.js, Angular2 的开发库
app.js, 我们刚刚开发的脚本。
在 body 中，使用了名为 <my-app> 的元素，这是应用的根的占位，Angular 将在这里显示我们的应用。
6. Run it!
我们需要一个文件服务器来服务静态资源。
对这个示例来说，我们这里使用通过 npm 安装的 live-server，因为它默认就提供了动态加载。
打开终端窗口，输入下面的命令。
npm start
还记得我们添加的 npm 命令吗？
live-server 自动帮我们启动浏览器，当我们更新文件的时候，还可以自动刷新页面。
稍等一下，浏览器就会显示出下面的内容。
做一点修改
live-server 自动检测项目文件的修改，并刷新浏览器。
将项目的信息修改为 "My Second Angular 2 app.", live-server 会检测到修改自动刷新显示。
保持 live-server 运行在终端窗口中，并进行更多的修改，可以使用 Ctrl-C 来停止它。
祝贺你，我们完成了！
