文档章节

angular 2 学习一 ES6 工具链

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

精选30+云产品,助力企业轻松上云!>>>

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
徐汇
程序员
私信 提问
加载中
请先登录后再评论。

暂无文章

opencv学习笔记2:图像处理基础

学习笔记 来源于淘宝的一个视频,记录下学习笔记。 图像由像素组成: 任何一个图,有很多点构成,每一个点,我们管它叫像素。 如图,左边图和右边图时同一个事物。不同点是左边点比较大,右边...

osc_4b2ephd0
4分钟前
0
0
搭配MySQL与MySQL搭配使用的最佳排序规则是什么? [关闭] - What is the best collation to use for MySQL with PHP? [closed]

问题: I'm wondering if there is a "best" choice for collation in MySQL for a general website where you aren't 100% sure of what will be entered? 我想知道对于一般网站而言,MySQL......

技术盛宴
5分钟前
0
0
NNIE-lite 为算法工程师而生

《NNIE-lite》   趟过NNIE的小伙伴可能都知道,NNIE是有很多坑的,而且是纯C的环境,除非你有几年C的开发经验,否则阅读起来不是那么容易的,而作为算法工程师,我相信更多人和我一样擅长P...

osc_jpwyxabk
6分钟前
0
0
ECCV 2020 Oral | 可逆图像缩放:完美恢复降采样后的高清图片

     本文介绍的是ECCV 2020 Oral论文《Invertible Image Rescaling》,论文作者来自北大、微软亚洲研究院和多伦多大学。   作者 | 郑书新   编辑 | 丛 末      论文地址:https...

osc_qheq8wav
6分钟前
0
0
投稿、接收双Double,史上最火ECCV你中了么?

     作者 | 蒋宝尚   编辑 | 丛 末   经历了程序主席一度失联,线上线下两难抉择的ECCV 2020终于迎来了放榜。据官方邮件介绍,这届会议 共收到5025份有效投稿,共接收1361篇,录取率...

osc_ssnt89cw
7分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部