1.創建文件夾
mkdir angular2-app
cd angular2-app
2.配置Typescript
需要通過一些特殊的設置來指導Typesript進行編譯。
新建一個 tsconfig.json 文件，放於項目根目錄下，並輸入以下配置
{ "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ] }
3.Typescript Typings
有很多Javascript的庫，繼承了一些 Javascript的環境變量以及語法， Typescript編譯器並不能原生的支持這些。 所以我們使用 Typescript 類型定義文件 - d.ts 文件 （即 typings.json） 來解決這些兼容性問題。
創建 typings.json 文件，放於項目根目錄下
{ "ambientDependencies": { "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" } }
4.添加我們需要的庫
我們推薦使用npm來管理我們的依賴庫。在項目根目錄下創建package.json文件
{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": { "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ", "tsc": "tsc", "tsc:w": "tsc -w", "lite": "lite-server", "typings": "typings", "postinstall": "typings install" }, "license": "ISC", "dependencies": { "angular2": "2.0.0-beta.7", "systemjs": "0.19.22", "es6-promise": "^3.0.2", "es6-shim": "^0.33.3", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.2", "zone.js": "0.5.15" }, "devDependencies": { "concurrently": "^2.0.0", "lite-server": "^2.1.0", "typescript": "^1.7.5", "typings":"^0.6.8" } }
5.安裝這些依賴包只需要運行
npm install
這樣我們就完成了我們的開發環境的搭建。
6.創建一個應用源碼的子目錄
我們習慣上將我們的程序放在項目根目錄下的 app 子目錄下，所以首先創建一個 app 文件夾
mkdir app
cd app
7.創建組件文件
在 app 文件夾下創建一個 app.component.ts 文件，然后輸入以下內容
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
讓我們來詳細的看一下這個文件， 在文件的最后一行，我們定義了一個 類。
8.初始化引導
在 app 文件夾下創建 main.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
我們需要做兩個東西來啟動這個應用
-
Angular自帶的 bootstrap 方法
-
我們剛剛寫好的啟動組件
把這個兩個統統 import進來，然后將組件傳遞給 bootstrap 方法。
9.添加 index.html 文件
首先回到項目的根目錄，在根目錄中創建index.html
<html>
<head>
<title>Angular 2 QuickStart</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>
<my-app>Loading...</my-app>
</body>
</html>
HMTL中三個部分需要說明一下：
-
加載我們需要的 javascript庫， 附錄中會有詳細的介紹
-
配置了 System 並讓他import 引入 main 文件
-
添加 my-app 這個HTML元素，這里才是加載我們Angular實例的地方！
我們需要一些東西來加載應用的模塊，這里我們使用 SystemJs。 這里有很多選擇，SystemJS不一定是最好的選擇，但是這個挺好用。
10.
編譯然后運行
只需要在終端中輸入
npm start
程序將會將Typescript編譯成 Javascript ，同事啟動一個 lite-server， 加載我們編寫的index.html。 顯示 My First Angular 2 App.