聚合物元素和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) {
}
};
});

  • 这两者之间有什么区别?

  • 有哪些问题是聚合物解决了，而AngularJS还没有或不会解决的?

  • 将来有计划把Polymer和AngularJS绑定在一起吗?

94550 次浏览
小开

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

  1. Polymer的webcomponents.js是一个库，它包含了一些用于各种W3C api的腻子，这些api属于Web Components的保护伞。这些都是:

    • 自定义元素
    • HTML进口
    • # EYZ0
    • 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中。当浏览器看到这个定义时，它就被注册为一个新元素。

回答问题吧!

Angular和Polymer的区别是什么?

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

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

enter image description here

红色层:我们通过一组填充物得到明天的网。请记住，随着浏览器采用新的api，这些库会随着时间的推移而消失。

黄色层:在聚合物.js中撒一些糖。这一层是我们对如何一起使用指定api的意见。它还添加了数据绑定、语法糖、更改监视器、发布属性……我们认为这些东西有助于构建基于web组件的应用程序。

绿色:UI组件的综合集(绿色层)仍在进行中。这些web组件将使用所有的红色+黄色图层。

Angular指令与自定义元素?

请看Alex Russell的回答。基本上，Shadow DOM允许组合HTML片段，但也是封装HTML的工具。这基本上是web上的一个新概念，其他框架也会加以利用。

有哪些问题是聚合物解决了，而AngularJS还没有或不会解决的?

相似之处:声明式模板、数据绑定。

区别:Angular有用于服务、过滤器、动画等的高级api，支持IE8，在这一点上，它是一个构建生产应用的更健壮的框架。聚合物刚刚起步。

将来有计划把Polymer和AngularJS绑定在一起吗?

他们# EYZ0。也就是说，无论是Angular团队还是Ember团队，他们最终都会在自己的框架中使用底层平台api。

在我看来，这是一个巨大的胜利。在web开发人员拥有强大工具(Shadow DOM, Custom Elements)的世界中，框架作者也可以利用这些原语来创建更好的框架。他们中的大多数人目前都经历了重重困难才能“完成工作”。

更新:

关于这个主题有一篇很棒的文章:“下面是Polymer和Angular的区别”

小开

关于你的问题:

将来有计划把Polymer和AngularJS绑定在一起吗?

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

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

小开

在这个视频中，来自AngularJS的两个家伙讨论了这两个框架(AngularJS 1.2和超越版本)的异同。

这些链接将带你到正确的问答:

  • < a href = " http://www.youtube.com/watch?v=W13qDdJDHp8&特性= share& t = 56 m34s”> http://www.youtube.com/watch?v=W13qDdJDHp8&特性= share& t = 56 m34s < / >
  • < a href = " http://www.youtube.com/watch?v=W13qDdJDHp8&特性= share& t = 59 m8”> http://www.youtube.com/watch?v=W13qDdJDHp8&特性= share& t = 59 m8 < / >
小开

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

小开

聚合物组件的作用域是因为它们隐藏在阴影dom中的树。这意味着他们的风格和行为不会流失。Angular并不像聚合物web组件那样局限于你创建的特定指令。angular指令可能会与全局作用域中的某些内容发生冲突。在我看来，你从聚合物中得到的好处就是我解释过的。具有CSS作用域的模块化组件;JavaScript到任何东西都无法触及的特定组件。贱民DOM !

Angular指令可以被创建，这样你就可以用几个功能来注释一个元素。在聚合物网组件中，情况并非如此。如果您希望组合组件的功能，可以将两个组件包含到另一个组件中(或将它们包装在另一个组件中)，也可以扩展现有组件。请记住，主要的区别仍然是每个组件的范围在聚合物网络组件。你可以共享css &Js文件可以跨多个组件，也可以内联它们。

是的，根据Rob Dodson和Eric Bidelman的说法，Angular计划在版本2+中加入聚合物

有趣的是，这里没有人提到scope这个词。我认为这是主要的区别之一。

它们有很多不同之处，但当涉及到为应用程序创建像积木一样的功能块时，它们也有很多相似之处。我认为可以肯定地说，Angular将是应用程序框架，而聚合物有一天可能会与指令一起出现在同一个应用程序中，主要的区别是作用域，但聚合物可能会取代你当前的许多指令。但我看不出为什么Angular不能按原样工作，同时也要包含聚合物组件。

在我写这篇文章的时候，我再次阅读了答案，我注意到Eric Bidelman(ebidel)在他的回答中提到了这一点:

Shadow DOM允许组合HTML片段，同时也是封装HTML的工具。”

我从对罗伯·道森和Eric Bidelman的多次采访中得到了答案。但我觉得这个答案的措辞并没有让这个人的问题得到他想要的理解。话虽如此，我认为我已经触及了他正在寻找的答案，但在这个问题上，我所掌握的信息绝不比Rob Dodson和Eric Bidelman更多

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

JavaScript Jabber -聚合物与Rob Dodson和Eric Bidelman

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

小开

Angular提供的MVVM(模型-视图，视图-模型)并不是Polymer想要解决的问题。可组合&当你考虑比较Angular和Polymer时，Angular指令给你的可重用性(自定义标签+相关逻辑组合)是一个更理智的比较。Angular现在是，将来也仍然是一个更广泛的服务于目的的框架。

小开

聚合物是一种Web Components垫片

  • Web Components"是一套新的标准，被HTML 5所包围，旨在为Web应用程序提供可重用的构建模块。

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

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

但是Polymer不仅仅是一个web组件的填充库…

# EYZ0

enter image description here

所有元素都可以定制和扩展。它们被用作从社交小部件到动画到web API客户端的任何东西的构建块。

Polymer不是一个web应用程序框架

  • 聚合物更像是一个图书馆，而不是一个框架。

  • 聚合物不支持路由、应用范围、控制器等。

    • 但它确实有双向绑定，使用组件“感觉”就像使用Angular指令一样。
      • 李< / ul > < / >

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

    • 还要注意的是，当AngularJS稳定时，Polymer仍然被认为是“前沿”。

    • 这将是有趣的观察这两个谷歌项目的发展!

小开

这两者之间有什么区别?

对用户来说:没什么。你可以用这两种方法来构建出色的应用程序。

对于开发者来说:他们使用不同的语法，所以任何一种解决方案都有相当陡峭的学习曲线。Angular已经存在了很长时间，而且有一个庞大的社区，所以你很难找到还没有解决的问题。

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

有哪些问题是聚合物解决了，而AngularJS还没有或不会解决的?

聚合物是一种朝向利用新的网络组件标准的方法。如果本地支持自定义元素、Shadow DOM和HTML导入等特性，那么不利用它们将是愚蠢的。目前，大多数web组件特性都没有得到广泛支持(当前的状态)，因此Polymer充当垫片或桥接器。有点像一个填充(事实上它确实使用填充)。

将来有计划把Polymer和AngularJS绑定在一起吗?

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

如果再做一遍，我们可能根本就不会使用聚合物，而是等待它成熟。话虽如此，聚合物有优点(有些很好)和缺点(有些很令人沮丧)，但我认为这是另一个话题的讨论。

小开

Angularjs 指令是一种制作自定义元素的方法。您可以使用自定义属性定义新的自定义标记。聚合物也可以做到这一点，但它会以一种有趣且更简单的方式实现。聚合物实际上不是一个框架，它只是一个库。而是一个强大而神奇的图书馆，你可以爱上它(像我一样)。Polymer让你学习由w3c制作的原生web组件技术，web浏览器最终实现了它。Web组件是未来的技术，但聚合物让你现在就使用这种技术。谷歌Polymer是一个提供语法糖和填充的库，用于使用web组件构建元素和应用程序。记得我说过聚合物不是框架而是一个库。但当你使用Polymer时，实际上你的框架是DOM。这篇文章是关于angularjs ver 1和聚合物的，我已经在我的项目中使用过这两个，我个人更喜欢聚合物而不是angularjs。但是Angular版本2与angularjs版本1相比是完全不同的。angular 2中的指令有不同的含义。

小开

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

polymer-element:

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

提交答案