让我们从零开始，使用Typescript构建一个超级简单的 AngularJs 2应用。
先跑一个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-app cd 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 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 { }
让我们来详细的看一下这个文件， 在文件的最后一行，我们定义了一个 类。
组件类
在这个文件地步，我们创建了一个啥都不做的空组件类 AppComponent。 当我们真正开发应用的时候， 我们可以扩展这个类，比如添加一些属性和方法逻辑。 这个 AppComponent 类之所以为空是因为我们在入门程序中他不用做任何事情。
模块
Angular应用是模块化的。 他们包含很多完成某项功能的模块文件。
大多数程序文件会 export出一个东西比如一个组件。 我们的 app.component.ts 文件 exports出了 AppComponent
export class AppComponent { }
exports使一个文件转变成一个模块。 文件名（不包含扩展名）通常就是这个模块的名称。 所以， app.component 就是我们的第一个模块的名称。
一些更复杂的应用会有继承于 AppComponent 的子组件， 而且会有很多文件和模块。但是我们的快速入门程序不需要这么多， 一个组件就够了。
如果一个组件依赖其他的组件， 在Typescript应用中， 当我们需要引入其他模块的时候，直接import进来就可以使用。 例如：