先跑一个demo
运行这个 demo先来感受一下 angularjs2 的应用。
下面是这个应用的文件结构
angular2-app|_ app| |_ app.component.ts| |_ main.ts|_ index.html|_ license.md
总结来说就是一个 index.html 文件和两个在 app 文件下的 typescript 文件， 我们可以hold住！
下面我们将一步一步的构建这样的一个程序：
配置我们的开发环境 编写 angular 初始化组件 引导它控制我们主要的 index.html 页面 编写index.html 页面开发环境搭建
建立文件夹
mkdir angular2-appcd angular2-app
配置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 ]}
我们稍后在附录中会详细讲解这个 tsconfig.json
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 }}
同样的，在附录中会有更详细点的解释
添加我们需要的库
我们推荐使用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 }}
在附录中，会有更详细的解释
安装这些依赖包只需要运行
npm install
这样我们就完成了我们的开发环境的搭建。
第一个angular 组件
组件是angular中最基本的一个概念。 一个组件包含一个视图 – 我们用来展示信息或者完成用户交互的页面。 技术上来讲， 一个组件就是一个控制模板试图的类， 在开发应用中会写很多组件。 这是我们第一次尝试写一个组件，所以我们保证他尽可能的简单。
创建一个应用源码的子目录
我们习惯上将我们的程序放在项目根目录下的 app 子目录下，所以首先创建一个 app 文件夹
mkdir appcd app
创建组件文件
在 app 文件夹下创建一个 app.component.ts 文件，然后输入以下内容
import {component} from 'angular2/core';@component({ selector: 'my-app', template: 'my first angular 2 app'})export class appcomponent { }
让我们来详细的看一下这个文件， 在文件的最后一行，我们定义了一个 类。
组件类
在这个文件地步，我们创建了一个啥都不做的空组件类 appcomponent。 当我们真正开发应用的时候， 我们可以扩展这个类，比如添加一些属性和方法逻辑。 这个 appcomponent 类之所以为空是因为我们在入门程序中他不用做任何事情。
模块
angular应用是模块化的。 他们包含很多完成某项功能的模块文件。
大多数程序文件会 export出一个东西比如一个组件。 我们的 app.component.ts 文件 exports出了 appcomponent
export class appcomponent { }
exports使一个文件转变成一个模块。 文件名（不包含扩展名）通常就是这个模块的名称。 所以， app.component 就是我们的第一个模块的名称。
一些更复杂的应用会有继承于 appcomponent 的子组件， 而且会有很多文件和模块。但是我们的快速入门程序不需要这么多， 一个组件就够了。
如果一个组件依赖其他的组件， 在typescript应用中， 当我们需要引入其他模块的时候，直接import进来就可以使用。 例如：
import {appcomponent} from './app.component'
angular 同样是一个模块， 他是一系列模块的集合。 所以当我们需要angular的一些功能时，同样的把angular引入进来。
组件注解
当我们给一个类加上注解的时候， 一个类就变成了 angular的组件。 angular 需要通过注解来搞明白怎么去构建视图， 还有组件是怎么与应用的其他部分进行整合的。
我们用 componet 方法来定义一个组件的注解， 这个方法需要引入 angular2/core 才可以使用。
import {component} from 'angular2/core';
在typescript中，我们在类上面添加注解， 注解的方式很简单，使用 @ 作为前缀进行注解。
@component({ selector: 'my-app', template: 'my first angular 2 app'})
@component 告诉angular这个类是一个组件。 里面的参数有两个, selector 和 template.
selector参数是一个 css 选择器， 这里表示选择 html 标签为 my-app的元素。 angular 将会在这个元素里面展示appcomponent 组件。
记住这个 my-app 元素，我们会在 index.html 中用到
template控制这个组件的视图， 告诉angular怎么去渲染这个视图。 现在我们需要让 angular去加载这个组件
初始化引导
在 app 文件夹下创建 main.ts
import {bootstrap} from 'angular2/platform/browser'
import {appcomponent} from './app.component'
bootstrap(appcomponent);
我们需要做两个东西来启动这个应用
angular自带的 bootstrap 方法
我们刚刚写好的启动组件
把这个两个统统 import进来，然后将组件传递给 bootstrap 方法。
附录中会详细讲解 为什么我们从 angular2/platform/browser中引入bootstrap 方法，还有为什么会创建一个main.ts文件
现在万事俱备，只差东风啦！
添加 index.html 文件
首先回到项目的根目录，在根目录中创建index.html
angular 2 quickstart loading...
hmtl中三个部分需要说明一下：
加载我们需要的 javascript库， 附录中会有详细的介绍
配置了 system 并让他import 引入 main 文件
添加 my-app 这个html元素，这里才是加载我们angular实例的地方！
我们需要一些东西来加载应用的模块，这里我们使用 systemjs。 这里有很多选择，systemjs不一定是最好的选择，但是这个挺好用。
systemjs的具体使用不在我们的快速入门教程里，在附录中会有一个剪短的说明。
当angular调用main.ts文件中的 bootstrap方法， 它读取 appcomponent 的注解，找到 my-app 这个html元素， 并将template 渲染进去。
编译然后运行
只需要在终端中输入
npm start
程序将会将typescript编译成 javascript ，同事启动一个 lite-server， 加载我们编写的index.html。 显示 my first angular 2 app.
最终的结构
|_ angular2-quickstart|_ app| |_ app.component.ts| |_ main.ts|_ node_modules …|_ typings …|_ index.html|_ package.json|_ tsconfig.json|_ typings.json