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

时间：2013-08-06 19:42:35

标签： javascript angularjs polymer

在Polymer Getting Started页面上，我们看到了一个聚合物实例的例子：

<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定义了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) {
        }
    };
});

  • 两者有什么区别？

  • 聚合物解决了AngularJS没有或不会有什么问题？

  • 以后是否计划将Polymer与AngularJS联系起来？

10 个答案:

答案 0 :(得分：516)

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

  1. Polymer的webcomponents.js是一个库，其中包含多个用于各种W3C API的polyfill，这些API属于Web Components保护伞。这些是：

    • 自定义元素
    • HTML Imports
    • <template>
    • Shadow DOM
    • 指针事件
    • 其他

    文档中的左导航（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>（例如<element name="x-foo">）在x-foo.html中定义。当浏览器看到该定义时，它会被注册为新元素。

    4. 回答问题！

    Angular和Polymer有什么区别？

    我们在Q&A video中介绍了部分内容。通常，Polymer是一个旨在使用（并展示如何使用）Web组件的库。它的基础是自定义元素（例如，您构建的所有内容都是一个Web组件），它随着Web的发展而不断发展。为此，我们仅支持最新版本的现代浏览器。

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

    enter image description here

    RED层：我们通过一组polyfill获得明天的网络。请记住，随着浏览器采用新的API，这些库会随着时间的流逝而消失。

    黄色层：用聚合物撒上一些糖.js。这一层是我们对如何一起使用spec'd API的看法。它还增加了数据绑定，合成糖，变更观察者，已发布属性等内容......我们认为这些内容有助于构建基于Web组件的应用程序。

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

    Angular指令与自定义元素？

    见Alex Russell的answer。基本上，Shadow DOM允许组合HTML，但也是封装HTML的工具。这基本上是网络上的一个新概念，也是其他框架将利用的东西。

    聚合物解决AngularJS没有或不会有什么问题？

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

    差异：Angular具有用于服务，过滤器，动画等的高级API，支持IE8，此时，它是用于构建生产应用程序的更强大的框架。聚合物刚刚以alpha开始。

    以后是否计划将Polymer与AngularJS联系起来？

    他们是separate projects。也就是说，Angular和Ember团队announced他们最终将在他们自己的框架中使用底层平台API。

    ^这是一个巨大的胜利IMO。在Web开发人员拥有强大工具（Shadow DOM，Custom Elements）的世界中，框架作者也可以利用这些原语来创建更好的框架。他们中的大多数人目前正在努力“完成工作”。

    更新：

    关于这个主题有一篇非常好的文章：“Here’s the difference between Polymer and Angular”

答案 1 :(得分：57)

对于你的问题：

  

未来是否计划将Polymer与AngularJS联系起来？

来自AngularJS的官方推特账号：“angularjs将使用聚合物作为其小部件。这是双赢的”

来源：https://twitter.com/angularjs/status/335417160438542337

答案 2 :(得分：19)

在本视频中，来自AngularJS的2个人讨论了这两个框架（AngularJS 1.2和Beyond）的差异和相似之处。

这些链接将带您进入正确的Q＆amp; A：

答案 3 :(得分：19)

1＆amp; 2）聚合物组件的作用域是阴影dom中隐藏的树。这意味着他们的风格和行为不会流血。 Angular的范围不是您创建的特定指令，如聚合物Web组件。角度指令可能与您的全局范围内的某些内容发生冲突。 IMO从聚合物中获得的好处就是我所解释的..具有作用范围的css＆amp; amp;没有任何东西可以触及的特定组件的JavaScript。不可触摸的DOM！

可以创建Angular指令，以便您可以使用多个功能来注释元素。在Polymer web组件中并非如此。如果要组合组件的功能，则将两个组件包含在另一个组件中（或将它们包装在另一个组件中），或者可以扩展现有组件。请记住，主要区别仍在于每个组件都在聚合物网络组件中作用域。你可以分享css＆amp; js文件跨多个组件，或者你可以内联它们。

3）是的，根据Rob Dodson和Eric Bidelman的说法，Angular计划将聚合物纳入版本2+

有趣的是，这里没有人提到范围这个词。我认为这是主要的差异之一。

有许多不同之处，但在创建模块化乐高版本时，它们也有很多共同之处，就像应用程序的各种功能一样。我认为可以肯定地说Angular将是应用程序框架，聚合物有一天可能会在同一个应用程序中沿着指令生活，主要区别在于范围，但聚合物可能是许多当前指令的替代品。但我认为没有理由为什么Angular不能按原样工作，也包括聚合物组件。

在我写这篇文章的同时再次阅读答案时，我注意到Eric Bidelman（ebidel）在他的answer中做了一些报道：

＆＃34; Shadow DOM允许组合HTML，但也是封装HTML的工具。＆＃34;

为了给予信用到期的信用，我通过听取许多采访 Rob Dodson 和 Eric Bidelman 得到了答案。但是我觉得答案并没有给这个人的问题提供他想要的理解。话虽如此，我想我已经触及了他正在寻找的答案，但我没有比Rob Dodson和Eric Bidelman更多关于这个主题的信息

以下是我收集的信息的主要来源。

JavaScript Jabber - Polymer with Rob Dodson and Eric Bidelman

Shop Talk Show - Web Components With Rob Dodson

答案 4 :(得分：6)

  

Polymer是一个Web组件垫片

  • ＆＃34; Web Components＆＃34;是一套新的标准，由HTML 5封装，旨在为Web应用程序提供可重用的构建块。

  • 浏览器处于实现＆＃34; Web组件＆＃34;的各种状态。规范，因此使用Web Components编写HTML还为时过早。

  • 但是唉！聚合物救援！ Polymer是一个为HTML代码提供抽象层的库，允许它使用Web Components API，就像它在所有浏览器中完全实现一样。这称为poly-filling， Polymer团队将此库分发为webcomponents.js。这曾经被称为platform.js btw。

但是Polymer不仅仅是用于Web组件的polyfill库...

  

Polymer还通过Elements

提供开放和可重用的Web组件构建块

enter image description here

可以自定义和扩展所有元素。这些用作从社交窗口小部件到动画到Web API客户端的构建块。

  

Polymer不是Web应用程序框架

  • Polymer更像是一个库而不是一个框架。

  • Polymer不支持路由，应用程序范围，控制器等等。

    • 但它确实有双向绑定，并使用组件＆＃34;感觉＆＃34;就像使用Angular指令一样。

  • 虽然Polymer和AngularJS之间存在一些重叠，但它们并不相同。事实上，AngularJS团队已经提到在即将发布的版本中使用Polymer库。

  • 还要注意聚合物仍被认为是＃34;出血边缘＆＃34;而AngularJS正在稳定下来。

  • 观看这两个Google项目的演变会很有趣！

答案 5 :(得分：5)

我认为从实际角度来看，最终角度指令的模板特征和聚合物利用的Web组件方法都可以完成相同的任务。我可以看到的主要差异是聚合物利用Web API包含一些HTML，一种语法更正确，更简单的方式来实现Angular在呈现模板时以编程方式执行的操作。然而，正如所述，Polymer是一个用于使用组件构建声明性和交互式模板的小框架。它仅用于UI设计，仅在最现代的浏览器中受支持。 AngularJS是一个完整的MVC框架，旨在通过使用数据绑定，依赖项和指令使Web应用程序声明。他们是两种完全不同的动物。对于你的问题，在我看来，除了拥有数十个预先构建的组件之外，你在使用聚合物超过角度方面没有任何好处，但是仍然需要你将它们移植到角度指令上。然而，在未来，随着Web API变得更加先进，Web组件将完全消除以编程方式定义和构建模板的需要，因为浏览器将能够以与处理javascript或css文件的方式类似的方式简单地包含它们。 / p>

答案 6 :(得分：0)

Angular提供的MVVM（模型视图，视图模型）不是Polymer旨在解决的问题。可组合的＆amp;当你考虑比较Angular和Polymer时，Angular指令给你的可重用性（自定义标签+相关的逻辑组合）是一个更合理的比较。 Angular现在仍将是一个更广泛的目标服务框架。

答案 7 :(得分：0)

  

两者有什么区别？

对用户：不多。你可以用这两种方法构建出色的应用程序。

对于开发人员：他们使用不同的语法，因此任何一种解决方案都有相当陡峭的学习曲线。 Angular已经存在了很长时间，并且拥有一个巨大的社区，所以你很难找到尚未解决的问题。

对建筑师：非常不同。 Angular是一个应用程序框架，负责您生活的各个方面。它甚至还有垂直集成的指令，以防您需要类似功能的组件。另一方面，聚合物更像是现收现付。你想要一个模态，肯定的事情，你想要一个交互式小部件，没问题，你想要路由处理，我们可以做到这一点。在Angular要求Angular应用程序重用指令时，Polymer也更具可移植性。 Polymer的想法更加模块化，可以在其他应用程序中运行，甚至可以在Angular应用程序中使用。

  

聚合物解决AngularJS没有或不会有什么问题？

聚合物是一种利用新的Web组件标准的方法。如果本地支持自定义元素，Shadow DOM和HTML导入等功能，那么不利用它们将是愚蠢的。目前，大多数Web组件功能未得到广泛支持（current status），因此Polymer充当垫片或桥梁。有点像polyfill（事实上它确实使用polyfill）。

  

未来是否计划将Polymer与AngularJS联系起来？

我们一直使用Angular和Polymer一年多了。做这件事的部分决定是基于Polymer团队直接向我们承诺的互操作性。我们放弃了这个想法。我们现在正朝着只使用聚合物的方向发展。

要重新做一遍，我们可能根本不会使用Polymer，而是等待它成熟。据说聚合物有它的优点（一些相当不错）和缺点（其中一些非常令人沮丧）但我认为这是另一个线程的讨论。

答案 8 :(得分：0)

Angularjs 指令是一种制作自定义元素的方法。您可以使用自定义属性定义新的自定义标记。聚合物也可以这样做但它会以一种有趣且更简单的方式进行。聚合物实际上不是一个框架它只是一个库。但是一个强大而令人惊叹的库，你可以爱上它（像我一样）。 Polymer让您学习w3c制作的原生Web组件技术，Web浏览器最终实现它.web组件是未来的技术，但聚合物让您现在可以使用该技术.Google Polymer是一个提供语法糖和polyfill用于构建的库使用Web组件的元素和应用程序。记住我说聚合物不是框架而且它是一个库。但是当你使用Polymer时，实际上你的框架是DOM。这篇帖子是关于angular js ver 1和聚合物我已经工作了两者都是我的项目，我个人更喜欢聚合物而不是angularjs。但Angular版本2在angularjs ver 1.directive中的角度2完全不同，角度2具有不同的含义。

答案 9 :(得分：0)

Angular指令在概念上类似于Custom Elements，但它们是在不使用Web Components API的情况下实现的。 Angular指令是构建自定义元素的一种方法，但Polymer和Web Components规范是基于标准的方法。

聚合物 - 元素：

<polymer-element name="user-preferences" attributes="email">
  <template>
    <img src="https://secure.user-preferences.com/path/{{userID}}" />
  </template>
  <script>
    Polymer('user-preferences', {
      ready: function() {
        this.userID= md5(this.email);
      }
    });
  </script>
</polymer>

Angular指令：

app.directive('user-preferences', ['md5', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.userID= md5(attrs.email);
    },
    template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
  };
}]);
相关问题
最新问题