Angular 2 入门二

ES6工具链

原文：汇智网

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

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

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

<!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>

posted on 2016-07-13 16:04 阳光的微笑阅读(596) 评论(0) 收藏举报