程序员经验分享-hwhale

Polymer 元素和 AngularJS 指令有什么区别？

2024-01-09

关于聚合物入门 http://www.polymer-project.org/docs/start/usingelements.html页面中，我们看到了聚合物的实际应用示例：

<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="polymer-all/platform/platform.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="x-foo.html">
  </head>
  <body>
    <!-- 3. Declare the component by its tag. -->
    <x-foo></x-foo>
  </body>
</html>

你会注意到的是<x-foo></x-foo>被定义为platform.js and x-foo.html.

看起来这相当于 AngularJS 中的指令模块：

angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
    $scope.text = 'hey hey!';
})
.directive('x-foo', function() {
    return {
        restrict: 'EA',
        replace: true,
        controller: 'X-Foo',
        templateUrl: '/views/x-foo.html',
        link: function(scope, controller) {
        }
    };
});

  • 两者有什么区别？

  • Polymer 解决了哪些 AngularJS 没有或不会解决的问题？

  • 未来有计划将 Polymer 与 AngularJS 结合起来吗？


您不是第一个问这个问题的人:) 在回答您的问题之前，让我先澄清一些事情。

  1. 聚合物的webcomponents.js是一个库，其中包含属于 Web 组件范围内的各种 W3C API 的多个 Polyfill。这些都是：

    • 自定义元素
    • HTML 导入
    • <template>
    • 影子 DOM
    • 指针事件
    • others

    文档中的左侧导航（聚合物项目.org http://www.polymer-project.org/）有一个包含所有这些“平台技术”的页面。每个页面都有一个指向各个polyfill 的指针。

  2. <link rel="import" href="x-foo.html">是 HTML 导入。导入是将 HTML 包含在其他 HTML 中的有用工具。您可以包括<script>, <link>、标记或导入中的其他内容。

  3. 没有任何“链接”<x-foo>到 x-foo.html。在您的示例中，假设自定义元素定义为<x-foo> (e.g. <element name="x-foo">) 在 x-foo.html 中定义。当浏览器看到该定义时，它将被注册为新元素。

继续提问！

Angular 和 Polymer 有什么区别？

我们在我们的文章中介绍了其中的一些内容。一般来说，Polymer 是一个旨在使用（并展示如何使用）Web 组件的库。它的基础是自定义元素（例如，您构建的所有内容都是 Web 组件），并且它随着 Web 的发展而发展。为此，我们仅支持最新版本的现代浏览器。

我将使用这张图来描述 Polymer 的整个架构堆栈：

红色层：我们通过一组填充材料获得明天的网络。请记住，随着浏览器采用新的 API，这些库会随着时间的推移而消失。

黄色层：撒上一些糖和polymer.js。这一层是我们对如何一起使用规范的 API 的看法。它还添加了诸如数据绑定、语法糖、更改观察者、发布的属性之类的东西......我们认为这些东西对于构建基于 Web 组件的应用程序很有帮助。

绿色：UI 组件综合集（绿色层）仍在进行中。这些将是使用所有红色 + 黄色层的 Web 组件。

角度指令与自定义元素？

参见亚历克斯·拉塞尔的answer https://groups.google.com/forum/?fromgroups=#!searchin/polymer-dev/angular/polymer-dev/s761szb9WJc/Lb29XuoJdqAJ。基本上，Shadow DOM 允许编写 HTML 片段，同时也是封装该 HTML 的工具。这从根本上来说是网络上的一个新概念，也是其他框架可以利用的。

Polymer 解决了哪些 AngularJS 没有或不会解决的问题？

相似之处：声明性模板、数据绑定。

区别：Angular 拥有用于服务、过滤器、动画等的高级 API，支持 IE8，在这一点上，Angular 是用于构建生产应用程序的更强大的框架。 Polymer 刚刚起步。

未来有计划将 Polymer 与 AngularJS 结合起来吗？

They're 单独的项目 http://www.polymer-project.org/resources/faq.html#frameworks。也就是说，Angular 和 Ember 团队宣布 https://groups.google.com/forum/#!msg/polymer-dev/4RSYaKmbtEk/uYnY3900wpIJ他们最终将转向在自己的框架中使用底层平台 API。

^ 在我看来，这是一个巨大的胜利。在 Web 开发人员拥有强大工具（Shadow DOM、自定义元素）的世界中，框架作者还可以利用这些原语来创建更好的框架。他们中的大多数人目前都在经历巨大的困难才能“完成工作”。

UPDATE:

关于这个主题有一篇非常棒的文章：“这是 Polymer 和 Angular 之间的区别 http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/"

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

polymer

Polymer 元素和 AngularJS 指令有什么区别？ 的相关文章

随机推荐

热门标签