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

524

在“聚合物入门”页面上，我们看到了一个正在使用的聚合物示例：

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

  • 两者有什么区别？

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

  • 将来是否有计划将Polymer与AngularJS联系在一起？

javascript  angularjs  polymer 
— 丹·坎泽
source
— LCJ

Answers:

520

您不是第一个提出这个问题的人：）在提出您的问题之前，让我先澄清两件事。

  1. Polymer's webcomponents.js是一个库，其中包含适用于Web组件的各种W3C API的多个polyfill。这些是：

    • 自定义元素
    • HTML导入
    • <template>
    • 影子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.html中定义了<x-foo>（例如<element name="x-foo">）的自定义元素定义。当浏览器看到该定义时，它将被注册为新元素。

关于问题！

Angular和Polymer有什么区别？

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

我将使用此图像描述Polymer的整个体系结构堆栈：

在此处输入图片说明

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

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

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

角指令与自定义元素？

参见Alex Russell的答案。基本上，Shadow DOM可以组成HTML的一部分，但它也是封装HTML的工具。从根本上讲，这是Web上的一个新概念，其他框架也可以利用。

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

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

区别：Angular具有用于服务，过滤器，动画等的高级API，支持IE8，并且在这一点上，它是用于构建生产应用程序的更强大的框架。Polymer刚开始使用Alpha。

将来是否有计划将Polymer与AngularJS联系在一起？

他们是单独的项目。也就是说，Angular和Ember团队都宣布他们最终将转向在自己的框架中使用底层平台API。

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

更新：

关于这个主题，有一篇非常不错的文章：“ 这是Polymer和Angular之间的区别 ”

— 比比尔
source
46
这里的重点是，Polymer致力于使Web向前发展，特别是通过展示Web组件如何使Web开放，可共享和可扩展。AngularJS（以及Ember）涉及创建一个框架，该框架利用浏览器的最佳部分来创建响应式应用程序。一旦浏览器更好地支持Web组件，Angular和其他框架就可以在它们之上构建，以使框架代码更小，应用程序更简单。这就是为什么它是所有人的双赢。
— Schmuli 2013年
31
我仍然不了解Polymer自定义元素和Angular Directives之间的实际区别是什么？为什么在Angular项目中使用聚合物自定义元素代替Angular指令？
— ronag 2013年
3
因此，现有的Angular和Ember项目最终将受益于使用基础平台API。但是，当浏览器更好地支持Web组件时，在新项目上仍然使用Angular会带来任何好处，还是有效地变得多余？
— 煎饼
8
我认为要黑白两色：坚持使用AngularJS进行生产，并在业余时间与Polymer一起玩，以便您在时间到时熟悉它。
— thdoan 2014年
31
这是对polymer.js的一个很好的概述，但绝没有彻底回答这个问题……
— Christoph
57

对于您的问题：

将来是否有计划将Polymer与AngularJS联系在一起？

来自AngularJS的官方Twitter帐户：“ angularjs将使用聚合物作为其小部件。这是双赢的”

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

— 洛伊克山
source
2
@NREZ好的，我没有回答帖子的标题，但是帖子中的一个问题我的答案仅是第三个问题： Are there plans to tie Polymer in with AngularJS in the future? 我想引述您不认为的AngularJS团队的原创帖子是一个好主意？
— 卢瓦克米
是的，确定您的观点是有效的...只是描述可能会更好...就像我这次所做的一样，我确定下次您也
— 会这样做
是的，可以。thx为您的更新:)（我只是真正开始使用stackoverflow，所以在回复您之前我看不到您的更新...）
— loïcm。
那么他们改变了主意吗？我似乎找不到他们在哪里使用聚合物。
— theblang 2014年
我不认为这是答案。
— astroanu
19

1＆2）由于聚合物组件在阴影域中是隐藏的树，因此对其作用域进行了范围划分。这意味着他们的风格和行为无法流血。Angular的范围不像您创建的特定指令（如聚合物Web组件）。角度指令可能会与全局范围内的某些内容冲突。IMO，您将从聚合物中获得的好处就是我所解释的..模块化组件将css和JavaScript的范围扩大到了无法触摸的特定组件。不可修改的DOM！

可以创建Angular指令，以便您可以使用多个功能对元素进行注释。在聚合物网组件中并非如此。如果要组合组件的功能，则可以将两个组件包含到另一个组件中（或将它们包装在另一个组件中），也可以扩展现有组件。请记住，主要区别仍然是每个组件都属于聚合物纤网组件。您可以跨多个组件共享css和js文件，也可以内联它们。

3）是的，据Rob Dodson和Eric Bidelman所述，Angular计划在2+版中加入聚合物

有趣的是，这里没有人提到作用域一词。我认为这是主要差异之一。

有很多差异，但是在创建类似于应用程序功能的模块化乐高玩具时，它们也有很多共同点。我认为可以肯定地说，Angular是应用程序框架，有一天聚合物可能会与附带指令一起生活在同一个应用程序中，主要区别是范围，但聚合物可能会替代许多当前指令。但是我认为Angular不能按原样工作并且也不能包含聚合物组件。

在我写这篇文章时，再次通读答案，我注意到Eric Bidelman（ebidel）在他的答案中做了某种掩饰：

“ Shadow DOM可以组成HTML的一部分，但它也是封装HTML的工具。”

为了在应有的信誉上获得荣誉，我从听过Rob Dodson和Eric Bidelman的许多访谈中得到了答案。但是我觉得没有用答案来表达这个人想要的理解。话虽如此，我想我已经触及了他正在寻找的答案，但是与Rob Dodson和Eric Bidelman相比，我绝对没有关于该主题的更多信息。

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

JavaScript Jabber-Rob Dodson和Eric Bidelman撰写的Polymer

商店脱口秀-Rob Dodson的Web组件

— 埃里克·比斯哈德（Eric Bishard）
source
1
所以，如果我使用normalize.css，它在影子dom内不会规范化？因此，我需要将每个这样的组件分别归一化，而无须做一次？这是好事吗？
— Dmitri Zaitsev 2014年
1
不要将Shadow DOM视为IFRAME。而且我比较宽松地使用了此比较，因为它不是IFRAME。但是在IFRAME中，您将拥有自己的文档，该文档不受父文档的CSS和JavaScript页的影响。这是一件非常好的事情。这意味着您可以保证特定组件可以按预期运行，并且不会受到父页面的干扰。但是，如果影子DOM希望从父页面使用DOM，则可以。但这是另一个话题。
— 埃里克·比斯哈德
1
我知道，是的，CSS是一种泄漏性语言，但是在大多数情况下，可以通过在要隔离的DOM中使用唯一的类前缀来提供简单（尽管并不完美）的解决方案。而且，当然，要避免使用标记和ID选择器，但这并不是一个好习惯。另一方面，您实际上可能希望泄漏的某些声明（例如normalize.css或其他基于标签的表），而无需Shadow DOM即可轻松实现。可能不是完美的隔离，而是概率。可以在95％的用例中工作，至少在我能想到的情况下。
— 德米特里·扎伊采夫
2
话虽如此，我必须说我看到适当隔离的优点，并找到您的答案提供了很好的解释。
— Dmitri Zaitsev 2014年
6

聚合物是Web组件的垫片

  • “ Web组件 ”是HTML 5封装的一组新标准，旨在为Web应用程序提供可重用的构建块。

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

  • 可惜！高分子救援！ Polymer是一个库，为您的HTML代码提供了一个抽象层，从而使其可以使用Web组件API，就好像它已在所有浏览器中完全实现一样。 这就是所谓的 poly-filling，Polymer小组将此库作为webcomponents.js分发。这曾经被称为platform.js btw。

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

Polymer还通过Elements提供开放和可重用的Web组件构建块

在此处输入图片说明

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

Polymer不是Web应用程序框架

  • 聚合物更多的是库而不是框架。

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

    • 但是它确实具有双向绑定，并且使用组件“感觉”就像使用Angular指令一样。

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

  • 还要注意，当AngularJS稳定时，Polymer仍被视为“出血边缘”。

  • 观看这两个Google项目的发展将非常有趣！

— 罗伯特·克里斯蒂安
source
聚合物不是填充物或填充胶。这就是webcomponents.js的polyfills。Polymer是用于编写Web组件的库。Polymer小组还创建了Web组件的集合（使用Polymer实施），但它们也不是“ Polymer”
— ebidel
更新：Polymer现在确实具有路线，并且稳定！：D
— JordyvD
5

我认为从实际角度看，最终角度指令的模板功能以及聚合物利用的Web组件方法都可以完成相同的任务。我看到的主要区别在于，Polymer利用Web API来包含HTML的一部分，这是一种语法上更正确，更简单的方法，可以实现Angular在渲染模板时以编程方式实现的功能。然而，正如已经指出的，Polymer是一个使用组件构建声明性和交互式模板的小型框架。它仅可用于UI设计，并且仅在最现代的浏览器中受支持。AngularJS是一个完整的MVC框架，旨在通过使用数据绑定，依赖项和指令使Web应用程序具有声明性。他们是两只完全不同的动物。对你的问题 在我看来，使用聚合物比使用angular并不会带来什么大的好处，除了拥有数十个预先构建的组件外，但是仍然需要您将它们移植到angular指令上。但是，在将来，随着Web API变得更加先进，Web组件将完全不需要以编程方式定义和构建模板，因为浏览器将能够以类似于处理javascript或CSS文件的方式简单地包含它们。

— richbai90
source
1
“它们是两种完全不同的动物。” 是的，他们是，但这与问题无关。问题是关于Polymer ELEMENTS与AngularJS指令。这些在很多方面都非常相似。我们并不是在问什么是最好的框架。Polymer与AngularJS。“在我看来，相对于角钢，使用聚合物不会有什么大的好处。”没有人提出这一建议，实际上我们都在谈论最终以某种能力并排使用它们。“对于您的问题，...使用聚合物而不是角钢将无益”，同样，这不是问题。
— Eric Bishard 2014年
0

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

— 萨尔沙兹
source
0

两者有什么区别？

给用户：不多。您可以同时构建出色的应用程序。

对开发人员：他们使用不同的语法，因此两种解决方案都具有相当陡峭的学习曲线。Angular已经存在了很长时间，并且拥有庞大的社区，因此很难发现尚未解决的问题。

对于建筑师：完全不同。Angular是负责您生活各个方面的应用程序框架。如果您想要类似组件的功能，它甚至具有垂直集成的指令。另一方面，聚合物更像是按需付费。您需要一个模态的，确定的东西，您需要一个交互式小部件，没问题，您想要进行路线处理，我们可以做到这一点。Polymer还具有更高的可移植性，因为Angular需要Angular应用程序才能重用指令。Polymer的想法是成为更多模块，并且可以在其他应用程序（甚至Angular应用程序）中使用。

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

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

将来是否有计划将Polymer与AngularJS联系在一起？

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

要再次进行此操作，我们可能根本不会采取使用Polymer的举动，而是等待它成熟。话虽这么说，Polymer具有优点（有些很好）和缺点（有些令人沮丧），但是我认为这是另一个话题的讨论。

— 为什么不呢
source
0

AngularJS 指令是一种用于制作自定义元素的方法。您可以使用自定义属性定义新的自定义标签。Polymer也可以做到这一点，但它会以一种有趣且更简单的方式进行工作.Polymer实际上并不是一个框架，它只是一个库，而是一个功能强大而令人惊叹的库，您可以爱上它（像我一样）。Polymer让您学习由w3c开发的本机Web组件技术，该Web浏览器最终会实现它。Web组件是未来的技术，但Polymer让您现在就使用该技术。GooglePolymer是一个提供语法糖和polyfill用于构建的库元素和带有Web组件的应用程序。请记住，我说Polymer不是框架，而是库。但是当您使用Polymer时，实际上您的框架是DOM。这篇文章是关于angular js ver 1和polymer的，我一直与他们一起工作是我的项目，我个人更喜欢Polymer而不是angularjs。但是Angular版本2与angularjs ver 1的比较完全不同。angular2中的指令具有不同的含义。

— 贝扎德·贝萨拉蒂
source
0

Angular指令在概念上类似于“自定义元素”，但它们是在不使用Web组件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}}" />'
  };
}]);
— 成都
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.