javascript – Polymer元素和AngularJS指令有什么区别？
作者：互联网
在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) {
}
};
});
>两者有什么区别？
> Polymer解决了AngularJS没有或不会有什么问题？
>未来是否计划将Polymer与AngularJS联系起来？
解决方法:
你不是第一个提出这个问题的人:)让我在回答你的问题之前澄清一些事情.
> Polymer的webcomponents.js是一个库,其中包含多个用于各种W3C API的polyfill,这些API属于Web Components保护伞.这些是：
>自定义元素
> HTML导入
>< template>
>影子DOM
>指针事件
>其他人
文档(polymer-project.org)中的left-nav有一个所有这些“平台技术”的页面.每个页面都有一个指向单个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有什么区别？
我们在Q&A video中介绍了其中的一些内容.通常,Polymer是一个旨在使用(并展示如何使用)Web组件的库.它的基础是自定义元素(例如,您构建的所有内容都是一个Web组件),它随着Web的发展而不断发展.为此,我们仅支持最新版本的现代浏览器.
我将使用此图像来描述Polymer的整个架构堆栈：
RED层：我们通过一组polyfill获得明天的网络.请记住,随着浏览器采用新API,这些库会随着时间的推移而消失.
黄色层：用聚合物撒上一些糖.js.这一层是我们对如何一起使用spec’d API的看法.它还添加了数据绑定,合成糖,变更观察者,已发布属性等内容……我们认为这些内容有助于构建基于Web组件的应用程序.
GREEN：全面的UI组件(绿色层)仍在进行中.这些将是使用所有红色黄色层的Web组件.
角度指令与自定义元素？
请参阅Alex Russell的answer.基本上,Shadow DOM允许组合HTML,但也是封装HTML的工具.这基本上是Web上的一个新概念,也是其他框架将利用的东西.
Polymer解决AngularJS没有或不会有什么问题？
相似之处：声明性模板,数据绑定.
差异：Angular具有用于服务,过滤器,动画等的高级API,支持IE8,此时,它是用于构建生产应用程序的更强大的框架.聚合物刚刚开始使用alpha.
是否有计划在未来将Polymer与AngularJS联系起来？
他们是separate projects.也就是说,Angular和Ember团队announced他们最终将在他们自己的框架中使用底层平台API.
^这是一个巨大的胜利IMO.在Web开发人员拥有强大工具(Shadow DOM,Custom Elements)的世界中,框架作者也可以利用这些原语来创建更好的框架.他们中的大多数人目前正在努力“完成工作”.
更新：
关于这个话题有一篇非常棒的文章：“Here’s the difference between Polymer and Angular”
标签：javascript,angularjs,polymer 来源： https://codeday.me/bug/20190925/1816833.html