[Angular2] Quick Start
使用TypeScript构建Angular2应用。
设置开发环境
0.安装Node和npm。
1.创建项目文件夹angular2-quickstart：
mkdir angular2-quickstart
cd angular2-quickstart2.创建文件tsconfig.json，配置TypeScript编译的相关参数：
{
"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.创建文件typings.json：
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}一些js库扩展了JavaScript的特性和语法，但是TypeScript编译器并不识别，因此需要在typings.json文件中配置TypeScript类型定义文件（文件名后缀为.d.ts）。
4.创建文件package.json：
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "concurrently \"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.8.2",
"typings":"^0.6.8"
}
}Angular2使用npm来管理应用所依赖的库。运行npm install安装依赖的包。
文件中定义了一些npm命令脚本：
npm start：在监控模式下运行编译器同时启动服务npm run tsc：运行TypeScript编译器npm run tsc:w：在监控模式下运行TypeScript编译器（进程会一直运行，监控TypeScript文件的变化，有变化时就重新编译）npm run lite：运行lite-server，一个轻量级静态文件服务器npm run typings：运行typings工具npm postinstall：npm完成包的安装后自动调用该命令，用于安装应用需要的TypeScript定义文件
编写组件
在项目根目录angular2-quickstart下面创建文件夹app ，用于存放代码。
mkdir app
cd app在app文件夹下创建组件文件app.component.ts：
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }每个Angular应用至少包含一个根组件，按照惯例名为AppComponent。组件是Angular应用最基本的构件。
Angular应用是模块化的，由很多文件组成，每个文件专注一个功能。Angular本身也是模块化的，由很多库模块组成。
当需要某个模块的功能时，import该模块：
import {Component} from 'angular2/core';Component是一个装饰器函数，它接收一个元数据对象来告诉Angular如何创建和使用组件。为组件类应用该装饰器，通过在前缀@来调用，并传递一个元数据对象作为参数：
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})元数据对象中包含两个字段，selector和template：
- selector：为代表组件的HTML元素指定一个CSS选择器。组件元素的名称为
my-app，Angular会为HTML中的my-app元素创建并显示AppComponent实例。 - template：指定组件对应的模板。模板中核能会包含一些数据绑定。
在文件底部是一个名为AppComponent的空的类，后面可以再扩展：
export class AppComponent { }我们对类使用了export，这样在其它地方就能import该组件了。
加载根组件
现在需要告诉Angular来加载根组件。
在app文件夹下创建文件main.ts：
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);启动应用需要两样东西：浏览器bootstrap函数和应用的根组件AppComponent。然后调用bootstrap函数并传入根组件AppComponent。
创建文件index.html
在应用的根目录下创建文件index.html：
cd ..<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 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/es6/dev/src/testing/shims_for_IE.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>运行应用
运行应用：
npm start在浏览器中打开http://localhost:3000：
![[Angular2] Quick Start_第1张图片](http://img.e-com-net.com/image/product/c9a378168e3c4f989fc710e7d957dfad.jpg)
参考资料
Angular2官方文档
AngularJS中文社区