今天跟隨官網中的快速入門，開始我的第一個Angular2程序.
目錄結構是這樣的
angular2-quickstart
|__app
| |__app.component.ts
| |__boot.ts
|__index.html
|__license.md因爲是入門示例裏我不需要過多的瞭解其中的細節。只要跟隨它的步驟跑通這個例子即可。
1. 配置運行環境。
2. 用TypeScript寫Angular2組件。
3. 引導程序。
4. 寫主頁面（index.html）。
配置運行環境
延用之前學習TypeScript時的工程目錄在D:\workspace\vs文件夾下建一個angular2-quickstart文件夾，
使用VS打開這個文件夾，新建一個package.json文件，我們需要在這裏配置我們需要的庫文件。
package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}在命令行下定位到當前文件位置，運行
npm install配置typescript環境
在跟目錄下在新建一個 tsconfig.json文件並粘貼下面的代碼
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}這樣我們就完成了我們的環境配置。
開始寫我們的Angular組件
組件管理視圖-通過這個視圖可以向用戶展示信息以及響應用戶的反饋。
組件同樣是一個類，一個控制視圖模板的類。
在跟目錄下建一個app文件夾
在app下增加一個組件文件 app.component.ts
app/app.component.ts
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }在真實的應用中我們會在AppComponent中寫許多和業務有關的邏輯,但在入門程序中我們什麼也不做,讓他足夠簡單。
模塊
Angular程序是模塊化的，它是由許多專職於不同角色的模塊組成的，並且使用export暴露以供外部調用。
export class AppComponent { }引入一個外部模塊的語法我們在之前的TS學習中使用過。
app/boot.ts
import {AppComponent} from './app.component'註解
入門示例中把它叫做Component Metadata但我覺得稱爲註解更好理解吧（迷糊）。
一個類想要成爲Anglar的組件，需要我們爲它加上特定的註解，Anglar需要這些註解來構造視圖以及與應用的其它組件交互。
定義一個組件使用@Component註解，爲此我們需要引入Angular的核心庫。
import {Component} from 'angular2/core';寫註解是與其它語言如Java相類似的，都是在這個類上進行標識
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})selector是一個簡單的HTML選擇器，會選擇以my-app命名的HTML標籤<my-app></my-app>,Angular將會在此處創建，顯示一個實例。
template是這個組件對應的模板，它是一段HTML，指導Anglar如何呈現一個視圖。
引導程序
在app文件夾下新建一個boot.ts文件
app/boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);主頁面（index.html）
在跟目錄下新建一個index.html文件
index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<!-- 1. 載入 libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. 配置 SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. 顯示結果 -->
<body>
<my-app>Loading...</my-app>
</body>
</html>值得注意的
1. AngularJS運行依賴於 angular2-polyfills.js 和 Rx.js.
2. 配置SystemJS並且由它啓動boot引導程序.
3. 我們程序運行的結果將顯示在<my-app></my-app>中.
程序的流程大概是,我們通過SystemJS加載我們的boot.ts,在boot.ts中執行bootstrap函數,它會讀取AppComponent組件中的註解,查找my-app選擇器,定位<my-app>標籤,並在這個標籤之間用我們定義的模板渲染它.
運行
在程序的跟目錄下執行
npm start執行這個命令會完成兩件事件.
1. 進行編譯並在觀查模式(所有對程序的改動會立即反應到瀏覽器中)
2. 啓動一個lite-server服務器,載入index.html,並在程序改動時刷新瀏覽器
過一會兒在瀏覽器中會看到
My First Angular 2 App
完成了我們的第一個例子…
ps.哎英語不好是硬傷啊.