AngularJS2.0 quick start——其和typescript结合需要额外依赖

AngularJS2 发布于2016年9月份，它是基于ES6来开发的。

运行条件!

由于目前各种环境（浏览器或 Node）暂不支持ES6的代码，所以需要一些shim和polyfill（IE需要）让ES6写的代码能够转化为ES5形式并可以正常运行在浏览器中。



从上图可以看出在 Es5 浏览器下需要以下模块加载器：

systemjs - 通用模块加载器，支持AMD、CommonJS、ES6等各种格式的JS模块加载。

es6-module-loader - ES6模块加载器，systemjs会自动加载这个模块。

traceur - ES6转码器，将ES6代码转换为当前浏览器支持的ES5代码，systemjs会自动加载 这个模块。

接下来

从零开始，通过TypeScript创建一个简单的应用程序。

可以看一下Angular2.0的官网给出的Demo https://angular.io

开发环境配置

我们需要一个应用程序项目文件夹，用来放一些库，一些TypeScript 的配置和所选的TypeScript-aware编辑器。

创建一个项目 angular2-quickstart

在磁盘下面创建一个目录：angular2-quickstart

在项目目录下面增加一个

package.json

的文件，文件内容如下：

{
"name": "angular2-quickstart",
xxx，
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}

package.json

文件编辑好之后 使用npm install安装。

配置 TypeScript

我们要引导

TypeScript

编译器非常详细的设置。

在项目根目录下面增加一个文件

tsconfig.json

，文件内容如下：xxx

到目前位置配置完成。

简单组件开发

在项目根目录下面建立一个

app

目录 ，便于存放源代码。 在app下面增加一个组件文件

app.component.ts

文件内容如下：xxx

下面会告诉你如何调用上面的

AppComponent

组件。

在app目录下面增加一个boot.ts的文件，文件内容如下：

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

boot.ts

是用来运行这个组件的，需要两步来运行

1.导入

bootstrap

函数

2.导入我们刚才定义的

AppComponent

组件

调用

bootstrap

函数， 并传人主组件

AppComponent

。

在项目根目录

angular2-quickstart

下面创建一个index.html文件。内容如下：xxx 见http://angularjs.cn/A2nG

运行Angular 2.0

然后在cmd下运行我们的app

npm start

运行出来竟然是

Loding.....

解决方法：在index.html中head里面其他script之前加入如下代码：

<script src="node_modules/es6-shim/es6-shim.js"></script>

参考：http://angularjs.cn/A2nG