官网地址：https://angular.io/docs/ts/latest/quickstart.html
环境
1. package.json
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.0",
"@angular/compiler": "2.0.0-rc.0",
"@angular/core": "2.0.0-rc.0",
"@angular/http": "2.0.0-rc.0",
"@angular/platform-browser": "2.0.0-rc.0",
"@angular/platform-browser-dynamic": "2.0.0-rc.0",
"@angular/router-deprecated": "2.0.0-rc.0",
"@angular/upgrade": "2.0.0-rc.0",
"systemjs": "0.19.27",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.5",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^0.8.1"
}
}
npm：Node Packaged Modules的简称
package.json：定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。
2. 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"
]
}
这个文件用来指导Typescript进行编译。
angular2使用Typescript进行开发，虽然也有Javascript的开发方式（官网有指导说明），但是要复杂得多。
3. typings.json
{
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
}
}
有很多Javascript的库，继承了一些 Javascript的环境变量以及语法， Typescript编译器并不能原生的支持这些。 所以我们使用 Typescript 类型定义文件 - d.ts文件 （即 <code>typings.json</code>） 来解决这些兼容性问题
<br />
将以上三个文件，放置到项目文件夹的根目录下，终端定位到项目文件夹，输入npm install，环境就配好啦。
文件
1. app.component.ts
在app目录下新建组件文件app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
（1）Angular应用是模块化的。 他们包含很多文件，每一个文件专注于完成一项功能。大多数程序文件会export出一个组件。 我们的 app.component.ts 文件 exports出了 AppComponent这个组件。
（2）exports使一个文件转变成一个模块。 文件名（不包含扩展名）通常就是这个模块的名称。 所以， app.component 就是我们的第一个模块的名称。
export class AppComponent { }
（3）组件之间相互调用，如果一个组件依赖于其他组件，则用<code>import</code>导入
<pre><code>import {AppComponent} from './app.component'</code></pre>
import {Component} from 'angular2/core';
Angular同样是一个模块， 他是一系列模块的集合。使用Component组件中的函数定义需要导入Angular的核心包。
（4）
@Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
<code>@Component</code>表示该类是一个组件类。传递给<code>@Component</code>的是两个字段，一个<code>selector</code>，一个<code>template</code>。
<code>selector</code>是一个 css 选择器， 这里表示选择 html 标签为 <code>my-app</code>的元素。Angular 将会在这个元素里面展示AppComponent 组件。
的实例。
<code>template</code>控制这个组件的视图， 告诉Angular怎么去渲染这个视图。
<br />
2. main.ts
import {bootstrap} from '@angular/platform-browser-dynamic';
import {AppComponent} from './app.component';
bootstrap(AppComponent);
<code>bootstrap</code>是Angular自带的方法，我们导入它，并且将AppComponent传给它，用来启动AppComponent组件。
<br />
3. index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
（1）前面添加了许多js的依赖库
（2）配置了 System 并让他import 引入 main 文件
（3）添加 my-app 这个HTML元素
<br />
所以运行过程为：
当Angular调用main.ts文件中的 bootstrap方法， 它读取 AppComponent，找到 my-app 这个HTML元素， 并将template 渲染进去。
启动：在项目文件目录下，运行npm start.
程序将会将Typescript编译成 Javascript ，同时启动一个 lite-server， 加载我们编写的index.html。 显示 My First Angular 2 App.
