Polymer元素和AngularJS指令有什么区别？
Dan*_*nze 520 javascript angularjs polymer
在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.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联系起来？
ebi*_*del 519
你不是第一个提出这个问题的人:)让我在回答你的问题之前澄清一些事情.
Polymer's
webcomponents.js是一个库,其中包含多个用于各种W3C API的polyfill,这些API属于Web Components的范畴.这些是:- 自定义元素
- 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>(例如<element name="x-foo">)的自定义元素定义在x-foo.html中定义.当浏览器看到该定义时,它被注册为新元素.
关于问题!
Angular和Polymer有什么区别？
我们在问答视频中介绍了部分内容.通常,Polymer是一个旨在使用(并展示如何使用)Web组件的库.它的基础是自定义元素(例如,您构建的所有内容都是Web组件),它随着Web的发展而发展.为此,我们仅支持最新版本的现代浏览器.
我将使用此图像来描述Polymer的整个架构堆栈:
RED层:我们通过一组polyfill获得明天的网络.请记住,随着浏览器采用新API,这些库会随着时间的推移而消失.
黄色层:用聚合物撒上一些糖.js.这一层是我们对如何一起使用spec'd API的看法.它还添加了诸如数据绑定,合成糖,变更观察者,已发布属性等内容......我们认为这些内容有助于构建基于Web组件的应用程序.
GREEN:全面的UI组件(绿色层)仍在进行中.这些将是使用所有红色+黄色层的Web组件.
角度指令与自定义元素？
见Alex Russell的回答.基本上,Shadow DOM允许组合HTML,但也是封装HTML的工具.这基本上是Web上的一个新概念,也是其他框架将利用的东西.
Polymer解决AngularJS没有或不会有什么问题？
相似之处:声明性模板,数据绑定.
差异:Angular具有用于服务,过滤器,动画等的高级API,支持IE8,此时,它是用于构建生产应用程序的更强大的框架.聚合物刚刚开始使用alpha.
是否有计划在未来将Polymer与AngularJS联系起来？
他们是独立的项目.也就是说,Angular和Ember团队都宣布他们最终将在自己的框架中使用底层平台API.
^这是一个巨大的胜利IMO.在Web开发人员拥有强大工具(Shadow DOM,Custom Elements)的世界中,框架作者也可以利用这些原语来创建更好的框架.他们中的大多数人目前正在努力"完成工作".
更新:
关于这个话题有一篇非常好的文章:" 这是Polymer和Angular之间的区别 "
- 这里重要的一点是,Polymer正在向前推进Web,特别是通过展示Web Components如何使Web开放,可共享和可扩展.AngularJS(和Ember就此而言)是关于创建一个框架,利用浏览器的最佳部分来创建响应式应用程序.一旦Web组件得到浏览器的更好支持,Angular和其他框架就可以构建它们,使框架代码更小,应用程序更简单.这就是为什么它对所有人来说都是双赢的原因. (46认同)
- 我仍然不明白Polymer Custom Elements和Angular Directives之间的实际区别是什么？为什么我会在Angular项目中使用Polymer Custom Elements而不是Angular Directive？ (31认同)
- 这是对polymer.js的一个很好的概述,但绝不会彻底回答这个问题...... (31认同)
- 我认为要使它成为黑白:坚持使用AngularJS进行制作,并在业余时间使用Polymer,以便在时机成熟时熟悉它. (8认同)
- 因此,现有的Angular和Ember项目最终将受益于使用底层平台API.但是,当浏览器更好地支持Web组件时,仍然可以在使用Angular on*new*项目时获得任何好处,还是有效地变得多余？ (3认同)
loï*_* m. 57
对于你的问题:
是否有计划在未来将Polymer与AngularJS联系起来？
来自AngularJS的官方推特账号:"angularjs将使用聚合物作为其小部件.它是双赢的"
来源:https://twitter.com/angularjs/status/335417160438542337
- @NREZ好的,我没有回答帖子的标题,但帖子里面的一个问题我的回答只是针对第三个问题:"是否有计划将Polymer与AngularJS联系在一起？"我猜是引用AngularJS团队的原始帖子是个不错的想法？ (2认同)
Tob*_*uch 19
在这个视频中,来自AngularJS的2个人谈到了关于这两个框架(AngularJS 1.2和Beyond)的差异和相似之处.
这些链接将带您进入正确的问答:
- http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=56m34s
- http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=59m8s
Eri*_*ard 19
1&2)聚合物组件的范围是因为它们在阴影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的聚合物
- 话虽如此,我不得不说我看到了适当隔离的优点,并找到你的答案提供了很好的解释. (2认同)
Polymer是一个Web Components垫片
" Web组件 "是一组新的标准,由HTML 5封装,旨在为Web应用程序提供可重用的构建块.
浏览器处于实现"Web组件"规范的各种状态,因此使用Web组件编写HTML还为时过早.
可惜!聚合物救援! Polymer是一个为HTML代码提供抽象层的库,允许它使用Web Components API,就像它在所有浏览器中完全实现一样. 这称为poly-filling,Polymer团队将此库分发为webcomponents.js.这曾经被称为platform.js btw.
但Polymer不仅仅是用于Web组件的polyfill库......
Polymer还通过Elements提供开放和可重用的Web组件构建块
所有元素都可以定制和扩展.这些用作从社交窗口小部件到动画到Web API客户端的任何构建块.
Polymer不是Web应用程序框架
Polymer更像是一个库而不是一个框架.
Polymer不支持路由,应用程序范围,控制器等.
- 但它确实有双向绑定,使用组件"感觉"就像使用Angular指令一样.
虽然Polymer和AngularJS之间存在一些重叠,但它们并不相同.事实上,AngularJS团队已经提到在即将发布的版本中使用Polymer库.
还要注意,当AngularJS稳定时,聚合物仍然被认为是"前沿".
观看这两个Google项目的演变会很有趣!
我认为从实际角度来看,最终角度指令的模板特征和聚合物利用的Web组件方法都可以完成相同的任务.我可以看到的主要差异是聚合物利用Web API包含一些HTML,一种语法更正确,更简单的方式来实现Angular在呈现模板时以编程方式执行的操作.然而,正如所述,Polymer是一个用于使用组件构建声明性和交互式模板的小框架.它仅用于UI设计,仅在最现代的浏览器中受支持.AngularJS是一个完整的MVC框架,旨在通过使用数据绑定,依赖项和指令使Web应用程序声明.他们是两种完全不同的动物.对于你的问题,在我看来,除了拥有数十个预先构建的组件之外,你在使用聚合物超过角度方面没有任何好处,但是仍然需要你将它们移植到角度指令上.然而,在将来,随着Web API变得更加先进,Web组件将完全消除以编程方式定义和构建模板的需要,因为浏览器将能够以与处理javascript或css文件的方式类似的方式简单地包含它们.
- +1有点罗嗦,但非常好的信息. (2认同)