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
AngularJS2.0 quick start——其和typescript结合需要额外依赖的更多相关文章
- 打造AngularJs2.0开发环境
angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录. 参考文档:https://angular.cn/docs/ts/latest/quickstart. ...
- AngularJs2.0
AngularJs2.0中文官网站发布了. 官网地址:https://angular.cn/ 官网点击任何中文地方都可以显示英文原文,中文文档暂时只有 TypeScript的,JavaScript和d ...
- webapi 发布接口报405错误(angularjs2.0)
参考链接:http://www.cnblogs.com/shenbin/p/5680976.html web访问接口报405错误,以前的jQuery访问方式访问接口没有问题. 但是换成angularj ...
- 正在尝试解析依赖项“MvvmLightLibs (≥ 5.2.0.0)”。 “MvvmLightLibs”已拥有为“CommonServiceLocator”定义的依赖项
正在尝试解析依赖项"MvvmLightLibs (≥ 5.2.0.0)". "MvvmLightLibs"已拥有为"CommonServiceLoca ...
- AngularJS2.0教程(一)快速上手之基础知识
Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具.随着时 ...
- AngularJS2.0起步
ES6工具链 要让Angular2应用跑起来不是件轻松的事,因为它用了太多还不被当前主流浏览器支持的技术.所以,我们需要一个工具链:
- AngularJS2.0 一个表单例子——总体说来还是简化了1.x 使用起来比较自然
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AngularJS2.0 hello world例子——引入这么多额外的依赖库真是很忧伤啊
初识Angular2 写一个Angular2的Hello World应用相当简单,分三步走: 1. 引入Angular2预定义类型 import {Component,View,bootstrap} ...
- AngularJS2.0 教程系列(一)
http://my.oschina.net/u/2275217/blog/482178
随机推荐
- R语言学习 - 线图绘制
线图是反映趋势变化的一种方式,其输入数据一般也是一个矩阵. 单线图 假设有这么一个矩阵,第一列为转录起始位点及其上下游5 kb的区域,第二列为H3K27ac修饰在这些区域的丰度,想绘制一张线图展示. ...
- Java基础(九)--反射
什么是反射? 在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性 这种动态获取的信息以及动态调用对象的方法的功能称为反射机制. 反射的前 ...
- pycharm中将ui文件转换成py文件
方法一:直接使用命令行 python -m PyQt5.uic.pyuic xx.ui -o xx.py 方法二:直接使用命令 先进到C:\python\pkgs\pyqt-5.9.2-py37h65 ...
- 关于DOS-BOX的使用方法
将MASM文件夹里的全部文件拷贝到一个目录下,比如E:\masm下,然后将这个目录挂着为DOSBox的一个盘符下,挂载命令为 Mount c e:\masm 切换到E盘 然后编译,运行
- Spring自定义拦截器
HandlerInterceptorAdapter由Spring MVC提供,用来拦截请求. 实现自定义拦截器需要继承HandlerInterceptorAdapter或实现HandlerInterc ...
- Android table布局开发的一个简单的计算器
结果如图: XML文件如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- QT使用插件QAxWidget来展示web页面
要求:用qt版开发一个桌面程序,该程序有一个界面,用来显示一个采用silverlight开发的web页面. 分析:在qt中实现web显示,根据qt的版本和对应编译器的版本,有如下选择: (1)5.6以 ...
- 「 Luogu P1850 」 换教室
解题思路 很明显的是个期望 $dp$. 先前想到 $dp[i][j]$ 表示第决策到第 $i$ 个时间段,已经进行了 $j$ 次申请,然后就没有然后了,因为这根本就没法转移啊,你又不知道前 $i-1$ ...
- APUE 文件IO
文件 IO 记录书中的重要知识和思考实践部分 Unix 每个文件都对应一个文件描述符(file descriptor),为一个非负整数,一个文件可以有多个fd, 后面所有与文件(设备,套接字等)有关操 ...
- 洛谷 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可以通过重复获 ...