从零开始，创建一个超级简单的angular2.0的应用。
文件结构：
a.png
1、创建一个新的文件夹，作为我们的项目目录
$ mkdir angular2-quickstart $ cd angular2-quickstart
2、添加我们需要的库
我们推荐使用npm来获取和管理我们的开发库。
（1）：添加一个package.json文件到项目文件夹和复制/粘贴以下：
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "npm run lite", "lite": "lite-server" }, "license": "ISC", "dependencies": { "@angular/common": "2.0.0-rc.5", "@angular/compiler": "2.0.0-rc.5", "@angular/core": "2.0.0-rc.5", "@angular/forms": "0.3.0", "@angular/http": "2.0.0-rc.5", "@angular/platform-browser": "2.0.0-rc.5", "@angular/platform-browser-dynamic": "2.0.0-rc.5", "@angular/router": "3.0.0-rc.1", "@angular/router-deprecated": "2.0.0-rc.2", "@angular/upgrade": "2.0.0-rc.5", "core-js": "^2.4.0", "reflect-metadata": "0.1.3", "rxjs": "5.0.0-beta.6", "zone.js": "0.6.12", "angular2-in-memory-web-api": "0.0.15", "bootstrap": "^3.3.6" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.2.0" } }
（2）：打开终端窗口执行以下命令:
$ npm install
3、添加组件文件夹
$ mkdir app $ cd app
4、添加组件文件
现在添加一个文件名为app.component.js组件粘贴如下：
(function(app) { app.AppComponent = ng.core.Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));
接下来，看看我们都做了哪些工作？
（1）：我们使用IIFE（立即调用函数）定义了一个全局变量app，其中若不存在就传空对象。
(function(app) { })(window.app || (window.app = {}));
（2）：通过全局变量app我们输出AppComponent作为外部使用
app.AppComponent =
（3）：用Class预定义了一些对象和方法，方便后续使用，在这里我们定义了一个空的构造函数
.Class({ constructor: function() {} });
（4）：我们用ng.core.Component()定义angular组件，它是一个对象，其中ng.core.Component()有两个参数：一个是选择器，另一个是模板
ng.core.Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' })
5、添加一个ngmodule
angular应用程序是由包含所有组件和其他部分的模块组成
（1）：创建app.module.js文件：
(function(app) { app.AppModule = ng.core.NgModule({ imports: [ ng.platformBrowser.BrowserModule ], declarations: [ app.AppComponent ], bootstrap: [ app.AppComponent ] }) .Class({ constructor: function() {} }); })(window.app || (window.app = {}));
6、Bootstrap it!
（1）：添加一个新的文件main.js：
(function(app) { document.addEventListener('DOMContentLoaded', function() { ng.platformBrowserDynamic.platformBrowserDynamic() .bootstrapModule(app.AppModule); }); })(window.app || (window.app = {}));
（2）：我们需要满足两个条件才能启动应用程序：
1）、Angular的platformBrowserDynamic().bootstrapModule函数
2）、我们刚刚写的应用程序根模块。
7、在根目录下添加index.html，注意是根目录
<!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="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/rxjs/bundles/Rx.umd.js"></script> <script src="node_modules/@angular/core/bundles/core.umd.js"></script> <script src="node_modules/@angular/common/bundles/common.umd.js"></script> <script src="node_modules/@angular/compiler/bundles/compiler.umd.js"></script> <script src="node_modules/@angular/platform-browser/bundles/platform-browser.umd.js"></script> <script src="node_modules/@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>
8、在根目录下添加styles.css，注意是根目录
h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } body { margin: 2em; }
9、运行
打开终端窗口并输入此命令：
$ npm start
