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 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=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> <!-- . Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script> </head> <!-- . 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.