開發環境，vs2013 update 5，win7 x64,目前最新angular2版本為beta 17
第一步：安裝node.js
安裝node.js(https://nodejs.org/en/),為的是能夠使用npm獲得angular2.0的開發包
驗證是否安裝成功
cmd下輸入 node -v
npm -v
第二步：在vs2013上安裝typescript
安裝完成后在項目中可以添加typescript項目了，並且在項目屬性欄中會有typescript頁
第三步：創建項目
可以將沒用的都刪除
第四步：添加package.json文件用於獲取angularjs2包及依賴項
編輯文件，添加內容
{
"name": "angular2demo",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.17",
"systemjs": "0.19.27",
"es6-promise": "^3.2.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
},
"devDependencies": {
"typescript": "^1.7.5"
}
}
對於所需要的包可通過npm查詢最新版本，如
npm info angular2
下一步：配置package.config使用npm獲取angular2相關包
在右鍵項目，選擇power command 下的cmd下執行npm install
如果出現錯誤，需要安裝“tsd”包的話，需要執行
npm install tsd -g
然后再進行安裝
安裝完成后
下一步：創建個人應用，注意在入口處需要添加browser.d.ts引用
新建一個app目錄，並添加app.component.ts,main.ts
App.component.ts中添加angularjs模塊
import {Component} from 'angular2/core';
@Component({
selector: 'angular2-demo',
template: '<h1>這是我的第一個應用</h1>'
})
export class AppComponent { }
此時編譯會出現錯誤“connot find promise”等
這時需要在App.component.ts頂部添加引用
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
完整如下：
///<reference path="../node_modules/angular2/typings/browser.d.ts"/>
import {Component} from 'angular2/core';
@Component({
selector: 'angular2-demo',
template: '<h1>這是我的第一個應用</h1> <h2>太神奇了</h2>'
})
export class AppComponent { }
在mian.ts中添加app模塊
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
下一步：添加index.html頁
<html>
<head>
<title>Angular 2 Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<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. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main').then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<angular2-demo>Loading...</angular2-demo>
</body>
</html>
下一步：更改typescript編譯選項，修改項目文件
如果此時編譯會出現錯誤，錯誤信息“connot find name promise"
此時需要修改項目屬性，如下選擇system，同時修改項目文件在PropertyGroup中的debug和release中同時添加
<TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata>
<TypeScriptModuleResolution>Node</TypeScriptModuleResolution>
<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
最后，文件編譯成功，在app下的main.ts和app.component.ts會自動編譯成.js文件，終於在瀏覽器上看到了第一個angular2的頁面了，這中間好多坑，實驗了很多個版本，各個版本出現的錯誤都不是一樣的，畢竟還是beta版，先拿這個版本學習了！