文档章节

angular 2 学习一 ES6 工具链

王福林
 王福林
发布于 2016/12/01 10:17
字数 328
阅读 25
收藏 0

ES6工具链

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

toolchain

Angular2是面向未来的科技,要求浏览器支持ES6+,我们现在要尝试的话,需要加一些 垫片来抹平当前浏览器与ES6的差异:

  • systemjs - 通用模块加载器,支持AMD、CommonJS、ES6等各种格式的JS模块加载
  • es6-module-loader - ES6模块加载器,systemjs会自动加载这个模块
  • traceur - ES6转码器,将ES6代码转换为当前浏览器支持的ES5代码。systemjs会自动加载 这个模块。

HTML

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
    <title>hello,angular2</title>
    <!--模块加载器-->
    <script type="text/javascript" src="lib/system@0.16.11.js"></script>
    <!--Angular2模块库-->
    <script type="text/javascript" src="lib/angular2.dev.js"></script>
	<script>
    	//设置模块加载规则
    	System.baseURL = document.baseURI;
		System.config({
        	map:{traceur:"lib/traceur"},
			traceurOptions: {annotations: true}
		});
	</script>	    
</head>
<body>
    <img src="img/jay.gif">
	<pre class="logger"></pre>
    
    <!--定义一个ES6脚本元素-->
    <script type="module">
    	//用ES6语法定义一个类
        export class Logger{
        	constructor(){
            	this.el = document.querySelector("pre.logger");
                this.lines = [];
            }
            log(str){
            	this.lines.push(str);
                this.el.textContent = this.lines.join("\n");
            }
        }
        //实例化,测试一下
        var _ = new Logger();
        _.log("哎呦,不错哦!");
        _.log("真的是用ES6写的噢!");
    </script>
</body>
</html>

CSS

body{background:black;color:white;}
pre{line-height:30px;font-size:20px;}

 

© 著作权归作者所有

共有 人打赏支持
王福林
粉丝 10
博文 94
码字总数 37444
作品 0
徐汇
程序员
私信 提问
AngularJS2.0 教程系列(一)

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

笔阁
2015/07/22
0
1
ngular2 VS Angular4 深度对比:特性、性能

在Web应用开发领域,Angular被认为是最好的开源JavaScript框架之一。 Google的Angular团队已于3月23日发布了Angular4,而期待已久的Angular2版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
2018/06/02
0
0
Angular 1 和 Angular 2 集成:无缝升级的方法

已经有了 Angular 1 应用程序,正在想着怎么把它升级到 Angular 2?看看我们是怎么样支持递增升级的。 摘要 好消息。 我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用 你可以...

oschina
2015/08/27
8.5K
13
Angular 2 系列: 简介

[Angular 2 Series: Introduction][1] By Max on April 2, 2015 現在, [Angular 2][2] 和 [Ionic 2][3] 呼之欲出。我們超讚的小隊正在為下一個大版本的 Ionic 和 Angular 2 在努力工作。我為...

开源中国匿名会员
2015/05/02
0
0
linux 环境下 angular2 生成component 报错 ELOOP:too many symbolic links encountered, stat

adaptercat@debian :/project/angular/AngularTest/src/app$ ng generate component t Error: ELOOP: too many symbolic links encountered, stat '/project/angular/AngularTest/node_modul......

adaptercat
2017/10/10
263
1

没有更多内容

加载失败,请刷新页面

加载更多

【Python3之异常处理】

一、错误和异常 1.错误 代码运行前的语法或者逻辑错误 语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) def test: ^SyntaxError: invalid...

dragon_tech
22分钟前
1
0
编写可维护的 JavaScript

几乎每个程序员都有接手维护别人遗留项目的经历。或者,有可能一个老项目某一天又被重新启动。 通常情况下,接手老项目都会让人恨不得抛弃掉整个代码库从头开始。老代码凌乱、文档缺失、需要...

前端小攻略
34分钟前
1
0
Amino——框架层

框架层 目录 框架层... 1 Amino. 2 (一)、首页(TAB1)... 2 (二)、聊天(TAB2)... 3 (三)、我的社区(TAB3)... 5 (四)、探索(TAB4)... 6 (五)、钱包... 7 兴趣部落... 8 (一...

铸剑为犁413
52分钟前
0
0
k8s-dashboard

Kubernetes Dashboard 是一个管理Kubernetes集群的全功能Web界面,旨在以UI的方式完全替代命令行工具(kubectl 等) kubectl apply -f http://mirror.faasx.com/kubernetes/dashboard/master...

ZH-JSON
58分钟前
1
0
python如何安装库命令

python3 -m pip install 库名称

怪咖先生forever
59分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部