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

Question

在 Polymer Getting Started页面上，我们看到了一个正在运行的 Polymer 示例：

<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.jsand定义的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 结合起来？

score 518 · Accepted Answer

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

Polymerwebcomponents.js是一个库，其中包含多个适用于 Web Components 旗下的各种 W3C API 的 polyfill。这些是：
- 自定义元素
- HTML 导入
- <template>
- 影子 DOM
- 指针事件
- 其他
文档 ( polymer-project.org )中的左侧导航有一个包含所有这些“平台技术”的页面。这些页面中的每一个都有一个指向单个 polyfill 的指针。
<link rel="import" href="x-foo.html">是一个 HTML 导入。导入是在其他 HTML 中包含 HTML 的有用工具。您可以在导入中包含<script>、<link>、标记或其他任何内容。
没有任何东西“链接”<x-foo>到 x-foo.html。<x-foo>在您的示例中，假设(eg )的自定义元素定义<element name="x-foo">在 x-foo.html 中定义。当浏览器看到该定义时，它被注册为一个新元素。

关于问题！

Angular 和 Polymer 有什么区别？

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

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

在此处输入图像描述

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

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

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

Angular 指令与自定义元素？

请参阅亚历克斯·罗素的回答。基本上，Shadow DOM 允许编写 HTML 片段，但它也是封装 HTML 的工具。这基本上是网络上的一个新概念，其他框架将利用这一点。

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

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

差异：Angular 具有用于服务、过滤器、动画等的高级 API，支持 IE8，在这一点上，它是构建生产应用程序的更强大的框架。Polymer 刚刚开始处于 alpha 阶段。

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

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

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

更新：

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

score 57 · Accepted Answer

For your question:

Are there plans to tie Polymer in with AngularJS in the future?

From the official twitter account of AngularJS : "angularjs will use polymer for its widgets. It's win-win"

source : https://twitter.com/angularjs/status/335417160438542337

score 19 · Accepted Answer

在这个视频中，来自 AngularJS 的 2 位家伙讨论了这两个框架（AngularJS 1.2 和更高版本）的异同。

这些链接将带您到正确的问答：

score 19 · Accepted Answer

1 & 2) Polymer 组件的作用域是因为它们隐藏在 shadow dom 中的树。这意味着他们的风格和行为不会流血。Angular 并不局限于您创建的特定指令，例如聚合物 Web 组件。角度指令可能与您的全局范围内的某些内容发生冲突。IMO 您将从聚合物中获得的好处就是我所解释的......模块化组件将 css 和 JavaScript 限定为任何东西都无法触及的特定组件。不可触碰的DOM！

可以创建 Angular 指令，以便您可以使用多种功能注释元素。在 Polymer Web 组件中并非如此。如果您想组合组件的功能，您可以将两个组件包含到另一个组件中（或将它们包装在另一个组件中），或者您可以扩展现有组件。请记住，主要区别仍然是每个组件都包含在聚合物网络组件中。您可以跨多个组件共享 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 组件

score 6 · Accepted Answer

Polymer 是一个 Web Components shim

“ Web 组件”是一套新的标准，包含在 HTML 5 中，旨在为 Web 应用程序提供可重用的构建块。
浏览器处于实现“Web 组件”规范的各种状态，因此使用 Web 组件编写 HTML 还为时过早。
可惜！聚合物来拯救！ Polymer 是一个为您的 HTML 代码提供抽象层的库，允许它使用 Web 组件 API，就好像它已在所有浏览器中完全实现一样。 这称为poly-filling，Polymer 团队将此库分发为webcomponents.js。顺便说一句，这曾经被称为platform.js。

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

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

所有元素都可以自定义和扩展。这些被用作从社交小部件到动画再到 Web API 客户端的任何东西的构建块。

Polymer 不是 Web 应用程序框架

Polymer 更像是一个库而不是一个框架。
Polymer 不支持路由、应用程序范围、控制器等。
- 但它确实有双向绑定，并且使用组件“感觉”就像使用 Angular 指令一样。
虽然 Polymer 和 AngularJS 之间有一些重叠，但它们并不相同。事实上，AngularJS 团队已经提到在即将发布的版本中使用 Polymer 库。
另请注意，当 AngularJS 趋于稳定时，Polymer 仍被视为“前沿”。
观看这两个 Google 项目的发展将会很有趣！

score 5 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

两者有什么区别？

对用户：不多。您可以使用两者构建出色的应用程序。

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

对建筑师：非常不同。Angular 是一个应用程序框架，负责你生活的方方面面。如果您需要类似组件的功能，它甚至具有垂直集成的指令。另一方面，聚合物更像是现收现付。你想要一个模式，当然，你想要一个交互式小部件，没问题，你想要路由处理，我们可以做到。Polymer 也更便携，因为 Angular 需要一个 Angular 应用程序来重用指令。Polymer 的想法是更加模块化，并且可以在其他应用程序中工作，甚至是 Angular 应用程序。

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

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

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

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

再做一次，我们可能根本不会使用 Polymer，而是等待它成熟。话虽这么说，Polymer 有它的优点（一些非常好）和缺点（其中一些非常令人沮丧），但我认为这是另一个线程的讨论。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

聚合物元素：

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

角度指令：

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}}" />'
  };
}]);

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

10 回答 10

Related

Reference