5分钟入门Angular2.0

本文将会不断更新和整理

让我们从零开始，创建一个超级简单的angular2.0的应用。
文件结构：

a.png

1、创建一个新的文件夹，作为我们的项目目录

<pre>$ mkdir angular2-quickstart
$ cd angular2-quickstart</pre>

2、添加我们需要的库

我们推荐使用npm来获取和管理我们的开发库。
（1）：添加一个package.json文件到项目文件夹和复制/粘贴以下：
<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）：打开终端窗口执行以下命令:
<pre>$ npm install</pre>

3、添加组件文件夹

<pre>$ mkdir app
$ cd app</pre>

4、添加组件文件

现在添加一个文件名为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>

接下来，看看我们都做了哪些工作？
（1）：我们使用IIFE（立即调用函数）定义了一个全局变量app，其中若不存在就传空对象。
<pre>(function(app) {
})(window.app || (window.app = {}));</pre>
（2）：通过全局变量app我们输出AppComponent作为外部使用
<pre>app.AppComponent =</pre>
（3）：用Class预定义了一些对象和方法，方便后续使用，在这里我们定义了一个空的构造函数
<pre>.Class({ constructor: function() {} });</pre>
（4）：我们用ng.core.Component()定义angular组件，它是一个对象，其中ng.core.Component()有两个参数：一个是选择器，另一个是模板
<pre>ng.core.Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})</pre>

5、添加一个ngmodule

angular应用程序是由包含所有组件和其他部分的模块组成
（1）：创建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）：添加一个新的文件main.js：
<pre>(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.platformBrowserDynamic()
.bootstrapModule(app.AppModule);
});
})(window.app || (window.app = {}));</pre>

（2）：我们需要满足两个条件才能启动应用程序：
1）、Angular的platformBrowserDynamic().bootstrapModule函数
2）、我们刚刚写的应用程序根模块。

7、在根目录下添加index.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、运行

打开终端窗口并输入此命令：
<pre>$ npm start</pre>

5分钟入门Angular2.0