Polymer元素和AngularJS指令有什么区别？
在“聚合物使用入门”页面中，我们看到聚合物的实例：
<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绑定吗？
你不是第一个问这个问题的人:)在澄清你的问题之前，先澄清几件事。
-
Polymer的
webcomponents.js是一个包含多个W3C APIs的Web应用程序库的Web应用程序库。 这些是：- 自定义元素
- HTML导入
-
<template> - 影子DOM
- 指针事件
- 其他
文档（ polymer-project.org ）中的左侧导航栏中有所有这些“平台技术”的页面。 每个页面也都有一个指向单个填充的指针。
-
<link rel="import" href="x-foo.html">是一个HTML导入。 导入是在其他HTML中包含HTML的有用工具。 你可以包含<script>，<link>，标记，或其他任何在导入。 -
没有“链接”
<x-foo>到x-foo.html。 在你的例子中，假定在x-foo.html中定义了<x-foo>的自定义元素定义（例如<element name="x-foo">）。 当浏览器看到这个定义时，它被注册为一个新的元素。
在问题上！
Angular和Polymer有什么区别？
我们在Q＆Avideo中介绍了其中的一些内容。 一般来说，Polymer是一个旨在使用（并显示如何使用）Web组件的库。 它的基础是自定义元素（例如，您构build的所有东西都是一个Web组件），随着Web的发展而演变。 为此，我们只支持最新版本的现代浏览器。
我将使用这个图像来描述Polymer的整个架构栈：
RED层：通过一组polyfills获取明天的网页。 请记住，这些库随着浏览器采用新的API而消失。
黄色层：用polymer.js撒上一些糖。 这一层是我们关于如何一起使用specsd API的意见。 它还增加了数据绑定，合成糖，变化观察者，发布的属性等东西…我们认为这些东西对构build基于Web组件的应用程序很有帮助。
绿色：全面的UI组件（绿色层）仍在进行中。 这些将是使用所有红色+黄色图层的Web组件。
Angular指令与自定义元素？
见Alex Russell的答案 。 基本上，Shadow DOM允许构成HTML的一部分，但也是封装HTML的工具。 这从根本上说是networking上的一个新概念，而其他框架将会利用这个概念。
Polymer解决了AngularJS没有或没有的问题？
相似之处：声明性模板，数据绑定。
差异：Angular具有高级别的服务，filter，animation等API，支持IE8，在这一点上，构build生产应用程序是一个更强大的框架。 聚合物刚刚开始alpha。
有计划在未来将Polymer与AngularJS绑定吗？
他们是单独的项目 。 也就是说，Angular和Ember团队都宣布他们最终将转向在自己的框架中使用底层平台API。
^这是一个巨大的胜利海事组织。 在一个Web开发者拥有强大工具（Shadow DOM，Custom Elements）的世界里，框架作者也可以利用这些原语创build更好的框架。 他们中的大多数人目前正在经历艰难的工作，“完成工作”。
更新：
关于这个话题有一篇非常棒的文章：“ Polymer和Angular的差别 ”
对于你的问题：
有计划在未来将Polymer与AngularJS绑定吗？
来自AngularJS的官方Twitter账号：“angularjs将使用聚合物作为其小部件，这是双赢的”
来源： https ： //twitter.com/angularjs/status/335417160438542337
在这个video中，来自AngularJS的两个人谈到了这两个框架（AngularJS 1.2和Beyond）的差异和相似之处。
这些链接将带给您正确的问答：
1＆2）聚合物组件的范围是因为它们隐藏在树荫下的树。 这意味着他们的风格和行为不能stream血。 Angular没有限制在你创build的特定指令上，就像聚合物networking组件一样。 一个angular度指令可能会与你的全局范围内的东西相冲突。 IMO从聚合物中获得的好处就是我所解释的那些模块化的组件，它们把css和JavaScript的范围扩展到没有任何东西可以触及的特定组件。 不可触摸的DOM！
可以创buildAngular指令，以便可以使用多个function注释一个元素。 在Polymer Web组件中，情况并非如此。 如果您想要将包含两个组件的function组合到另一个组件（或将它们包装在另一个组件中），或者可以扩展现有组件。 请记住，主要的区别仍然是每个组件的范围在聚合物networking组件。 您可以在多个组件之间共享css＆js文件，也可以将它们内联。
3）是的，根据罗伯·多德森（Rob Dodson）和埃里克·比德曼（Eric Bidelman）的观点，Angular计划在2+版中join聚合物
有趣的是，这里没有人提到单词范围。 我认为这是主要分歧之一。
有很多不同之处，但是在为应用程序创build模块化乐高function时，它们也有许多共同之处。 我认为可以肯定地说，Angular将会是应用程序框架，聚合物有朝一日可以在同一个应用程序中一起生活，主要区别在于范围，但是聚合物可能会取代现有的许多指令。 但是我没有看到Angular不能像现在这样工作的原因，也包括聚合物成分。
我在写这篇文章的时候再次读到答案，注意到Eric Bidelman（ebidel）在他的回答中的确掩盖了一个问题 ：
“Shadow DOM允许组成HTML的一部分，但也是封装HTML的工具。”
为了在信贷到期时给予贷款，我听到了许多罗伯·多德森和埃里克·比德曼的采访，我得到了答案。 但是我觉得答案并不是要把这个人的问题理解成他想要的。 有了这个说法，我想我已经谈到了他正在寻找的答案，但我绝不会比罗伯·多德森（Rob Dodson）和埃里克·比德曼（Eric Bidelman）拥有更多关于这个问题的信息
这里是我收集的信息的主要来源。
JavaScript Jabber – 与Rob Dodson和Eric Bidelman的聚合物
商店脱口秀 – Web组件与Rob Dodson
聚合物是一种Web组件垫片
-
“ Web组件 ”是由HTML 5包装的一组新标准，旨在为Web应用程序提供可重用的构build块。
-
浏览器处于实现“Web组件”规范的各种状态，因此使用Web组件编写HTML还为时过早。
-
可惜！ 高分子来拯救！ Polymer是一个为HTML代码提供抽象层的库，允许使用Web Components API，就像它在所有浏览器中完全实现一样。 这被称为多填充 ，聚合物团队分发这个库作为webcomponents.js 。 这曾经被称为platform.js顺便说一句。
但是聚合物不仅仅是一个网页组件的polyfill库。
Polymer还通过Elements提供开放和可重用的Web组件构build块
所有元素都可以定制和扩展。 这些用作社交小部件，animation到Web API客户端的任何构build块。
聚合物不是一个Web应用程序框架
-
聚合物比框架更像是一个库。
-
聚合物不支持路线，应用范围，控制器等。
- 但它确实有双向绑定，使用组件“感觉”就像使用Angular指令一样。
-
虽然Polymer和AngularJS有一些重叠，但它们并不相同。 事实上，AngularJS团队在即将发布的版本中提到了使用Polymer库。
-
还要注意的是，在AngularJS稳定的时候Polymer仍然被认为是“stream血的边缘”。
-
观看这两个Google项目的演变将会很有趣。
我认为从实际的angular度来看，angular度指令的模板特征和聚合物所采用的Web组件方法都完成了相同的任务。 我看到的主要差异是聚合物利用Web API来包含一些HTML，在句法上更加正确，并且简化了Angular在呈现模板时以编程方式实现的方式。 然而聚合物正如上文所述，是一个使用组件构build声明性和交互式模板的小型框架。 它仅用于UIdevise目的，并且仅在最新的浏览器中受支持。 AngularJS是一个完整的MVC框架，旨在通过使用数据绑定，依赖关系和指令来使Web应用程序声明。 他们是两个完全不同的动物。 对于你的问题，在我看来，除了有几十个预置组件外，你不会从使用聚合物的angular度上获得主要的好处，但是仍然需要你将这些组件移植到angular度指令上。 然而，随着Web API变得更加先进，Web组件将完全消除以编程方式定义和构build模板的需求，因为浏览器将能够以类似的方式将它们包括在它处理javascript或css文件的方式中。
Angular提供的MVVM（模型视图，视图模型）并不是Polymer要解决的问题。 当您考虑比较Angular和Polymer时，Angular指令为您提供的可组合性和可重用性（自定义标签+关联的逻辑组合）是一个比较理智的比较。 Angular将会是一个更广阔的目标服务框架。
两者有什么区别？
给用户：不多。 你可以用这两个来构build真棒应用程序。
对开发人员来说：他们使用不同的语法，因此任何一种解决scheme的学习曲线都相当陡峭。 Angular已经存在了很长时间，并且拥有一个巨大的社区，所以你很难find尚未解决的问题。
对build筑师来说：非常不同。 Angular是一个负责你生活各个方面的应用程序框架。 它甚至有垂直集成的指令，以防你想要的function组件。 另一方面，聚合物更像是“现收现付”（pay-as-you-go）。 你想要一个模式，确定的事情，你想要一个交互的小部件，没有问题，你想要的路线处理，我们可以做到这一点。 由于Angular需要一个Angular应用程序来重用指令，Polymer也更具可移植性。 聚合物的想法是更模块化，将在其他应用程序，甚至Angular应用程序工作。
Polymer解决了AngularJS没有或没有的问题？
聚合物是一种利用新的networking组件标准的方法。 如果本地支持像自定义元素，Shadow DOM和HTML导入这样的function，那么利用这些function将是愚蠢的。 目前大多数Web组件function并没有得到广泛的支持（ 当前状态 ），所以聚合物就像垫片或桥梁一样。 有点像一个polyfill（实际上它使用polyfill）。
有计划在未来将Polymer与AngularJS绑定吗？
我们一起使用Angular和Polymer一年多。 部分决定是基于Polymer团队直接向我们承诺的互操作性。 我们已经放弃了这个想法。 现在我们正在朝着使用聚合物方向发展。
再做一遍，我们可能根本就不会采用聚合物，而是等待它成熟。 这是聚合物有它的利弊（一些相当好）和缺点（其中一些是相当令人沮丧），但我认为这是另一个线程的讨论。
Angularjs 指令是制作自定义元素的一种方法。 您可以使用自定义属性定义新的自定义标签。 聚合物也可以做到这一点，但它会做一个有趣的，更简单的方式。聚合物实际上不是一个框架，它只是一个图书馆，但一个强大和惊人的图书馆，你可以爱上它（像我一样）。 聚合物让你学习由W3C制作的本地networking组件技术，networking浏览器最终实现it.web组件是未来的技术，但聚合物让你现在使用该技术.Google聚合物是一个图书馆，为build筑提供语法糖和polyfills元素和应用程序与Web组件。请记住，我说聚合物不是一个框架，它是一个库。但是当你使用聚合物，实际上你的框架是DOM。这篇文章是关于angularjs ver 1和聚合物，我已经工作与他们两个是我的项目，我个人比angularjs更喜欢聚合物。 但是Angular版本2与angularjs版本1中的完全不同.directive在angular 2中有不同的含义。
Angular指令在概念上类似于自定义元素，但是它们在不使用Web Components API的情况下实现。 Angular指令是构build自定义元素的一种方法，但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}}" />' }; }]);
