文档章节

angular 2 学习一 ES6 工具链

王福林
 王福林
发布于 2016/12/01 10:17
字数 328
阅读 24
收藏 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版本则是之前版本的完全重构。 对于成熟的开发人员...

机器的心脏
06/02
0
0
ES6, Angular,React和ABAP中的String Template(字符串模板)

String Template(字符串模板)在很多编程语言和框架中都支持,是一个很有用的特性。本文将Jerry工作中使用到的String Template的特性做一个总结。 ES6 阮一峰老师有一个专门的网站介绍ES6入...

JerryWang_SAP
10/19
0
0
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
我们为什么以及是如何从Angular.js 迁移到 Vue.js?

一些背景介绍 我们的应用程序(Holistics.io )是一个基于 SQL的商业智能(BI)平台,使用Rails、Sidekiq、PostgreSQL和AngularJS编写。我们的Rails应用程序始于2013年底,作为一个简单的应用...

燕儿199606
06/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows上类似dnsmasq的软件Dual DHCP DNS Server

官网地址:http://dhcp-dns-server.sourceforge.net/官网定向的下载地址:https://sourceforge.net/projects/dhcp-dns-server/files/ 设置参考地址:http://blog.51cto.com/zhukeqiang/18264......

xueyuse0012
今天
3
0
LinkedHashMap源码解析

前言 HashMap中的元素时无序的,也就是说遍历HashMap的时候,顺序和放入的顺序是不一样的。 如果需要有序的Map,就可以采用LinkedHashMap. LinkedHashMap通过维护一个包含所有元素的双向链表,...

grace_233
今天
3
0
初识flask

文档 0.10.1版本 http://www.pythondoc.com/flask/index.html 1.0.2版本 https://dormousehole.readthedocs.io/en/latest/ 安装flask $ pip3 install flaskCollecting flask Downloading......

yimingkeji
昨天
5
0
Akka系统《sixteen》译

Actor是一个封装状态(state)和行为(behavior)的对象,它们只通过交换消息通信(放入收件人邮箱的邮件)。从某种意义上说,Actor是最严格的面向对象编程形式,但它更适合将他们视为人:在与Act...

woshixin
昨天
3
0
技术工坊|如何开发一款以太坊钱包(深圳)

【好消息!】HiBlock区块链技术工坊已经成功举办了26期,其中北京1期,西安1期,成都2期,上海22期。经常有社区的小伙伴问定期举办技术工坊的除了上海以外,其他城市有没有?现在区块链技术工...

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部