首页 文章

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

提问于
浏览 次
509

在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联系起来？

javascript angularjs polymer

10 回答

  • 6

    对于你的问题：

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

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

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

    回复于
  • 19

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

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

    • 自定义元素

    • HTML进口

    • <template>

    • 暗影DOM

    • 指针事件

    • 其他人

    文档中的左导航（polymer-project.org）有一个所有这些"Platform technologies"的页面 . 每个页面都有一个指向单个polyfill的指针 .

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

    • 没有"links" <x-foo> 到x-foo.html . 在您的示例中，假设 <x-foo> （例如 <element name="x-foo"> ）的自定义元素定义在x-foo.html中定义 . 当浏览器看到该定义时，它被注册为新元素 .

    关于问题！

    What is the difference between Angular and 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 directives vs. Custom Elements?

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

    What problems does Polymer solve that AngularJS has not or will not?

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

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

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

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

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

    更新：

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

    回复于
  • 19

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

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

    回复于
  • 0

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

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

    3) 是的，Angular计划根据Rob Dodson和Eric Bidelman将聚合物纳入第2版

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

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

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

    "Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML."

    为了给予信用到期的信用，我通过收听 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

    回复于
  • 5

    Polymer是Web Components垫片

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

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

    • 但是唉！聚合物救援！ Polymer is a library that provides an abstraction layer to your HTML code, allowing it to make use of the Web Components API as if it were fully implemented in all browsers. 这称为poly-filling，Polymer团队将此库分发为webcomponents.js . 这曾经被称为platform.js顺便说一句 .

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

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

    enter image description here

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

    Polymer不是Web应用程序框架

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

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

    • 但它确实有双向绑定，并且使用组件"feels"就像使用Angular指令一样 .

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

    • 还要注意，当AngularJS稳定时，聚合物仍然被认为是“前沿” .

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

    回复于
  • 0

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

    回复于
  • 0

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

    回复于
  • 512

    两者有什么区别？

    对用户：不多 . 你可以用两者构建出色的应用程序 .

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

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

    Polymer解决了AngularJS没有或不会有什么问题？

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

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

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

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

    回复于
  • 56

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

    回复于
  • 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>

    角度指令：

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

相关问题