用ES5编写Angular v2（1）”你好，世界”

3 年 ago
韵, 科
1 minute

※目前不建议使用这种方法

Angular v2已从Beta版升级为RC版。期待它的正式发布。

1. 从X系的改变到采用Typescript等，迁移工作需要学习很多，很辛苦。

首先，我思考着能否在现有的JavaScript上运行。尽管有些笨拙，我打算以”用ES5编写Angular2″为题目进行介绍。

Angular v2的获取

如果您可以自行进行npm安装或者构建，我建议您这样做（以便使用最新版本）。如果您无法这样做，或者想快速运行Angular v2，则可以考虑使用CDN。

html:使用 Angular v2 Beta.17 的示例


你好世界，我来制作一个样例。

首先，我们来写HTML部分。
由于Angular v2是面向组件的，所以内容非常简单。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/Rx.umd.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-polyfills.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
        <script src="hello-component.js"></script>
    </head>
    <body>
        <hello-component></hello-component>
    </body>
</html>

接下来是JavaScript的部分。

'use strict';
(function() {
    var app = ng.core
    .Component({
        selector: 'hello-component'
    })
    .View({
        template: '<p>Hello, {{name}} !</p>'
    })
    .Class({
        constructor: function() {
            this.name = 'world';
        }
    });
    document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(app);
    });
})();

在Component中，需要写入组件名称，在View中，需要写入用于显示的HTML模板，在Class中，需要写入数据模型的关联和处理内容。

当您运行此代码时，应该会显示“Hello, world！”。

总结

我成功地在ES5上运行了Angular v2。
虽然这次只是一个简单的示例，但我计划在下次做更多不同的事情。

bannerAds