What is the difference between Polymer elements and AngularJS directives?
在"聚合物入门"页面上,我们看到一个聚合物实际应用的示例:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <!-- 1. Shim missing platform features --> <script src="polymer-all/platform/platform.js"> <!-- 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> |
您会注意到,
这似乎相当于AngularJS中的指令模块:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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) { } }; }); |
这两者有什么区别?
聚合物解决了安格拉尔JS没有或不会解决的问题是什么?
将来是否有计划将聚合物与安古拉基连接起来?
你不是第一个问这个问题的人:)在回答你的问题之前,让我澄清一些事情。
Polymer的
- 自定义元素
- HTML导入
- 影子DOM
- 指针事件
- 其他
文档(polymer project.org)中左侧的nav有一个页面显示所有这些"平台技术"。这些页面中的每一页都有指向单个polyfill的指针。
没有"链接"
关于问题!
角度和聚合物有什么区别?
我们在问答视频中介绍了其中的一些内容。一般来说,聚合物是一个旨在使用(并展示如何使用)Web组件的库。它的基础是自定义元素(例如,您所构建的所有东西都是Web组件),并且随着Web的发展而演进。为此,我们只支持最新版本的现代浏览器。
我将使用这张图片来描述聚合物的整个架构堆栈:
红层:我们通过一组polyfill获得明天的网络。请记住,随着浏览器采用新的API,这些库会随着时间的推移而消失。
黄色层:在糖里撒上polymer.js。这一层是我们对如何一起使用规范的API的意见。它还添加了数据绑定、语法糖、变更观察者、发布的属性……我们认为这些东西对构建基于Web组件的应用程序很有帮助。
绿色:全面的UI组件集(绿色层)仍在进行中。这些将是使用所有红色+黄色层的Web组件。
角度指令与自定义元素?
看亚历克斯·罗素的回答。基本上,shadodom允许编写HTML的位,但也是封装该HTML的工具。这从根本上说是Web上的一个新概念,其他框架将利用这一点。
聚合物解决了安格拉尔JS没有或不会解决的问题是什么?
相似性:声明性模板,数据绑定。
不同之处:Angular具有用于服务、过滤器、动画等的高级API,支持IE8,目前,它是构建生产应用程序的更强大的框架。聚合物刚刚从α开始。
将来是否有计划将聚合物与安古拉基连接起来?
它们是独立的项目。也就是说,Angular和Ember团队都宣布他们最终将在自己的框架中使用底层平台API。
^这是一个巨大的胜利。在一个Web开发人员拥有强大工具(影子DOM、自定义元素)的世界中,框架作者还可以利用这些原语创建更好的框架。他们中的大多数人现在都经历了"完成任务"的巨大考验。
更新:
关于这个主题有一篇非常好的文章:"这是聚合物和角的区别。"
对于您的问题:
Are there plans to tie Polymer in with AngularJS in the future?
从AngularJS的官方twitter帐户中:"AngularJS将使用聚合物作为其小工具。这是双赢的
来源:https://twitter.com/angularjs/status/335417160438542337
1&2)聚合物组件的作用域是因为它们隐藏在阴影DOM中的树。这意味着他们的风格和行为不会流血。Angular不受您创建的特定指令(如聚合物Web组件)的限制。一个角度指令可能与你的全局范围内的某个东西冲突。我想你从聚合物中得到的好处就是我解释的。模块化组件,将CSS&javascript的作用域限定为任何东西都无法触及的特定组件。Untouchable DOM!
可以创建角度指令,这样您就可以使用多个功能来注释元素。在聚合物网络组件中,情况并非如此。如果要组合组件的功能,可以将两个组件包含到另一个组件中(或将它们包装到另一个组件中),也可以扩展现有组件。请记住,主要的区别仍然是每个组件的范围都在聚合物Web组件中。您可以跨多个组件共享CSS&JS文件,也可以将它们内联。
3)是的,根据Rob Dodson和Eric Bidelman,在版本2+中加入聚合物的角度计划
有趣的是,这里没有人提到范围这个词。我认为这是主要区别之一。
有很多不同之处,但在为应用程序创建类似乐高的模块化功能时,它们也有很多共同点。我认为可以肯定地说,Angular将是应用程序框架,而Polymer可能有一天会在同一个应用程序中使用附带的指令,主要的区别在于范围,但Polymer可能会取代您当前的许多指令。但我看不出为什么角不能像现在这样工作,也包括聚合物成分。
在我写这篇文章的时候,我又读了一遍答案,我注意到埃里克·拜德曼(Ebidel)在他的答案中有这样一点:
"shadom允许组合HTML的位,但也是封装该HTML的工具。"
为了给学分,我听了罗布·道森和埃里克·拜德曼的许多访谈,得到了我的答案。但我觉得答案不是为了让这个人的问题得到他想要的理解。有了这句话,我想我已经接触到了他正在寻找的答案,但我绝不能比罗布·道森和埃里克·拜德曼拥有更多关于这个问题的信息。
这是我收集信息的主要来源。
javascript Jabber-与Rob Dodson和Eric Bidelman的聚合物
Shop Talk Show-Web组件与Rob Dodson
在这段视频中,来自AngularJS的2个人讨论了这两个框架的不同之处和相似之处(AngularJS 1.2及更高版本)。
这些链接将为您提供正确的问答:
- http://www.youtube.com/watch?v=w13qdjdhp8&feature=share&t=56m34s
- http://www.youtube.com/watch?v=w13qdjdhp8&feature=share&t=59m8s
Polymer is a Web Components shim
"Web组件"是一组新的标准,由HTML5封装,旨在为Web应用程序提供可重用的构建基块。
浏览器处于实现"Web组件"规范的各种状态,因此使用Web组件编写HTML还为时过早。
但是唉!聚合物救援!Polymer是一个为HTML代码提供抽象层的库,允许它像在所有浏览器中完全实现一样使用Web组件API。这被称为poly filling,聚合物团队将这个库作为webcomponents.js分发。这以前被称为platform.js btw。
但是聚合物不仅仅是Web组件的PolyFill库…
Polymer also provides open and reusable Web Component building blocks via Elements
所有元素都可以定制和扩展。从社交小部件到动画,再到Web API客户端,这些都被用作构建基块。
Polymer is not a web application framework
聚合物更像是一个图书馆而不是一个框架。
聚合物不支持路径、应用范围、控制器等。
- 但它确实有双向绑定,使用组件"感觉"就像使用角度指令。
虽然聚合物和角形聚合物之间有一些重叠,但它们并不相同。事实上,AngularJS团队在即将发布的版本中提到使用聚合物库。
还需要注意的是,当AngularJS稳定时,聚合物仍然被认为是"出血边缘"。
观看这两个谷歌项目的发展将是很有趣的!
我认为,从实践的角度来看,最终模板的角度指令的特点,以及由聚合物杠杆作用的Web组件方法都完成了相同的任务。我看到的主要区别是,Polymer利用Web API包含了一些HTML,一种更正确的语法和简单的方法来实现Angular在呈现模板时的编程功能。然而,正如前面所述,聚合物是一个使用组件构建声明性和交互式模板的小框架。它仅用于用户界面设计,并且仅在最现代的浏览器中受支持。AngularJS是一个完整的MVC框架,旨在通过使用数据绑定、依赖关系和指令使Web应用程序具有声明性。它们是两种完全不同的动物。对于您的问题,在我看来,在这个时候,您将不会从使用聚合物过角,除了有几十个预建的组件,但是这仍然需要您移植到角度指令。然而,在未来,随着Web API变得更高级,Web组件将完全消除编程定义和构建模板的需要,因为浏览器将能够简单地以类似于它处理JavaScript或CSS文件的方式包含模板。
角度指令在概念上类似于自定义元素,但它们是在不使用Web组件API的情况下实现的。角度指令是构建自定义元素的一种方法,但是聚合物和Web组件规范是基于标准的方法。
聚合物元素:
1 2 3 4 5 6 7 8 9 10 11 12 | <polymer-element name="user-preferences" attributes="email"> <template> <img src="https://secure.user-preferences.com/path/{{userID}}" /> </template> Polymer('user-preferences', { ready: function() { this.userID= md5(this.email); } }); </polymer> |
角度方向:
1 2 3 4 5 6 7 8 9 | 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}}" />' }; }]); |
AngularJS指令是一种生成自定义元素的方法。可以使用自定义属性定义新的自定义标记。聚合物也可以做到这一点,但它会以一种有趣而简单的方式做到这一点。聚合物实际上不是一个框架,它只是一个图书馆,而是一个强大而神奇的图书馆,你可以爱上它(像我一样)。Polymer让您了解W3C制造的本地Web组件技术,Web浏览器最终实现了它。Web组件是未来的技术,但Polymer现在让您使用该技术。Google Polymer是一个库,为带有Web组件的建筑元素和应用程序提供句法糖和polyfill。记住我说过聚合物不是一个框架,它是一个图书馆。但是当你使用聚合物的时候,实际上你的框架是DOM。这篇文章是关于Angular JS Ver 1和Polymer的,我已经和他们合作过了,这两个都是我的项目,我个人更喜欢Polymer而不是AngularJS。但是角度版本2与角度版本1完全不同。角度2中的指令有不同的含义。
What is the difference between the two?
对用户:不多。你可以用这两种方法构建很棒的应用程序。
对于开发人员:他们使用不同的语法,所以这两种解决方案都有相当陡峭的学习曲线。Angular已经存在了更长的时间,并且有一个庞大的社区,所以你很难找到尚未解决的问题。
对建筑师来说:非常不同。Angular是一个应用程序框架,负责您生活的各个方面。它甚至具有垂直集成的指令,以防需要类似组件的功能。另一方面,聚合物更像是随劳随酬。你想要一个模式,当然,你想要一个互动的小部件,没问题,你想要路由处理,我们可以这样做。聚合物也更便于携带,因为角需要一个角应用程序来重用指令。聚合物的想法更具模块性,可以应用于其他应用程序,甚至是角度应用程序。
What problems does Polymer solve that AngularJS has not or will not?
聚合物是一种利用新的Web组件标准的方法。如果在本地支持自定义元素、影子DOM和HTML导入等功能,那么不利用它们将是愚蠢的。目前,大多数Web组件功能都没有得到广泛的支持(目前的状态),因此聚合物可以充当垫片或桥梁。有点像polyfill(实际上它使用polyfill)。
Are there plans to tie Polymer in with AngularJS in the future?
我们一起使用角型和聚合物已经一年多了。决定这样做的一部分是基于聚合物团队直接向我们承诺的互操作性。我们已经放弃了那个想法。我们现在正朝着只用聚合物的方向发展。
如果再重复一遍,我们可能根本就不会采取使用聚合物的行动,而是等待聚合物成熟。虽然聚合物有它的优点(有些相当好)和缺点(有些相当令人沮丧),但我认为这是另一个话题的讨论。
角提供的MVVM(模型视图、视图模型)并不是聚合物要解决的问题。当您考虑比较角度和聚合物时,角度指令提供给您的可组合&可重用性(自定义标记+关联逻辑组合)是一个更明智的比较。角度是并将继续是一个更广泛的用途服务框架。