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

AngularJS2.0 quick start——其和typescript结合需要额外依赖的更多相关文章

  1. 打造AngularJs2.0开发环境

    angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...

  2. AngularJs2.0

    AngularJs2.0中文官网站发布了. 官网地址:https://angular.cn/ 官网点击任何中文地方都可以显示英文原文,中文文档暂时只有 TypeScript的,JavaScript和d ...

  3. webapi 发布接口报405错误(angularjs2.0)

    参考链接:http://www.cnblogs.com/shenbin/p/5680976.html web访问接口报405错误,以前的jQuery访问方式访问接口没有问题. 但是换成angularj ...

  4. 正在尝试解析依赖项“MvvmLightLibs (≥ 5.2.0.0)”。 “MvvmLightLibs”已拥有为“CommonServiceLocator”定义的依赖项

    正在尝试解析依赖项"MvvmLightLibs (≥ 5.2.0.0)". "MvvmLightLibs"已拥有为"CommonServiceLoca ...

  5. AngularJS2.0教程(一)快速上手之基础知识

    Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具.随着时 ...

  6. AngularJS2.0起步

    ES6工具链 要让Angular2应用跑起来不是件轻松的事,因为它用了太多还不被当前主流浏览器支持的技术.所以,我们需要一个工具链:

  7. AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊

    初识Angular2 写一个Angular2的Hello World应用相当简单,分三步走: 1. 引入Angular2预定义类型 import {Component,View,bootstrap} ...

  9. AngularJS2.0 教程系列(一)

    http://my.oschina.net/u/2275217/blog/482178

随机推荐

  1. R语言学习 - 线图绘制

    线图是反映趋势变化的一种方式,其输入数据一般也是一个矩阵. 单线图 假设有这么一个矩阵,第一列为转录起始位点及其上下游5 kb的区域,第二列为H3K27ac修饰在这些区域的丰度,想绘制一张线图展示. ...

  2. Java基础(九)--反射

    什么是反射? 在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性 这种动态获取的信息以及动态调用对象的方法的功能称为反射机制. 反射的前 ...

  3. pycharm中将ui文件转换成py文件

    方法一:直接使用命令行 python -m PyQt5.uic.pyuic xx.ui -o xx.py 方法二:直接使用命令 先进到C:\python\pkgs\pyqt-5.9.2-py37h65 ...

  4. 关于DOS-BOX的使用方法

    将MASM文件夹里的全部文件拷贝到一个目录下,比如E:\masm下,然后将这个目录挂着为DOSBox的一个盘符下,挂载命令为 Mount c e:\masm 切换到E盘 然后编译,运行

  5. Spring自定义拦截器

    HandlerInterceptorAdapter由Spring MVC提供,用来拦截请求. 实现自定义拦截器需要继承HandlerInterceptorAdapter或实现HandlerInterc ...

  6. Android table布局开发的一个简单的计算器

    结果如图: XML文件如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  7. QT使用插件QAxWidget来展示web页面

    要求:用qt版开发一个桌面程序,该程序有一个界面,用来显示一个采用silverlight开发的web页面. 分析:在qt中实现web显示,根据qt的版本和对应编译器的版本,有如下选择: (1)5.6以 ...

  8. 「 Luogu P1850 」 换教室

    解题思路 很明显的是个期望 $dp$. 先前想到 $dp[i][j]$ 表示第决策到第 $i$ 个时间段,已经进行了 $j$ 次申请,然后就没有然后了,因为这根本就没法转移啊,你又不知道前 $i-1$ ...

  9. APUE 文件IO

    文件 IO 记录书中的重要知识和思考实践部分 Unix 每个文件都对应一个文件描述符(file descriptor),为一个非负整数,一个文件可以有多个fd, 后面所有与文件(设备,套接字等)有关操 ...

  10. 洛谷 4302 BZOJ 1090 SCOI2003 字符串折叠 UVA1630 Folding(输出方案版)

    [题解] 区间DP.  设f[i][j]表示i~j的最小代价.再枚举中间点k,很容易想到转移方程为f[i][j]=min(f[i][j],f[i][k]+f[k][j]),同时如果i~k可以通过重复获 ...