本文將會(huì)不斷更新和整理
讓我們從零開始，創(chuàng)建一個(gè)超級(jí)簡(jiǎn)單的angular2.0的應(yīng)用。
文件結(jié)構(gòu)：
1、創(chuàng)建一個(gè)新的文件夾，作為我們的項(xiàng)目目錄
<pre>$ mkdir angular2-quickstart
$ cd angular2-quickstart</pre>
2、添加我們需要的庫(kù)
我們推薦使用npm來(lái)獲取和管理我們的開發(fā)庫(kù)。
（1）：添加一個(gè)package.json文件到項(xiàng)目文件夾和復(fù)制/粘貼以下：
<pre>{
"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"
}
}
</pre>
（2）：打開終端窗口執(zhí)行以下命令:
<pre>$ npm install</pre>
3、添加組件文件夾
<pre>$ mkdir app
$ cd app</pre>
4、添加組件文件
現(xiàn)在添加一個(gè)文件名為app.component.js組件粘貼如下：
<pre>(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 = {}));</pre>
接下來(lái)，看看我們都做了哪些工作？
（1）：我們使用IIFE（立即調(diào)用函數(shù)）定義了一個(gè)全局變量app，其中若不存在就傳空對(duì)象。
<pre>(function(app) {
})(window.app || (window.app = {}));</pre>
（2）：通過(guò)全局變量app我們輸出AppComponent作為外部使用
<pre>app.AppComponent =</pre>
（3）：用Class預(yù)定義了一些對(duì)象和方法，方便后續(xù)使用，在這里我們定義了一個(gè)空的構(gòu)造函數(shù)
<pre>.Class({ constructor: function() {} });</pre>
（4）：我們用ng.core.Component()定義angular組件，它是一個(gè)對(duì)象，其中ng.core.Component()有兩個(gè)參數(shù)：一個(gè)是選擇器，另一個(gè)是模板
<pre>ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})</pre>
5、添加一個(gè)ngmodule
angular應(yīng)用程序是由包含所有組件和其他部分的模塊組成
（1）：創(chuàng)建app.module.js文件：
<pre>(function(app) {
app.AppModule =
ng.core.NgModule({
imports: [ ng.platformBrowser.BrowserModule ],
declarations: [ app.AppComponent ],
bootstrap: [ app.AppComponent ]
})
.Class({
constructor: function() {}
});
})(window.app || (window.app = {}));</pre>
6、Bootstrap it!
（1）：添加一個(gè)新的文件main.js：
<pre>(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));</pre>
（2）：我們需要滿足兩個(gè)條件才能啟動(dòng)應(yīng)用程序：
1）、Angular的platformBrowserDynamic().bootstrapModule函數(shù)
2）、我們剛剛寫的應(yīng)用程序根模塊。
7、在根目錄下添加index.html，注意是根目錄
<pre><!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">
<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>
<script src='app/app.component.js'></script>
<script src='app/app.module.js'></script>
<script src='app/main.js'></script>
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
</pre>
8、在根目錄下添加styles.css，注意是根目錄
<pre>h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
body {
margin: 2em;
}
</pre>
9、運(yùn)行
打開終端窗口并輸入此命令：
<pre>$ npm start</pre>
