Polymer元素和AngularJS指令有什么区别？

本文翻译自：What is the difference between Polymer elements and AngularJS directives?

On the Polymer Getting Started page, we see an example of Polymer in action: 在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>

What you will notice is <x-foo></x-foo> being defined by platform.js and x-foo.html . 您将注意到由platform.js和x-foo.html定义的<x-foo></x-foo> 。

It seems like this is the equivalent to a directive module in AngularJS: 看起来这相当于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) {}};
});

What is the difference between the two? 两者有什么区别？
What problems does Polymer solve that AngularJS has not or will not? Polymer解决AngularJS没有或不会有什么问题？
Are there plans to tie Polymer in with AngularJS in the future? 是否有计划在未来将Polymer与AngularJS联系起来？

#1楼

参考：https://stackoom.com/question/1DtnH/Polymer元素和AngularJS指令有什么区别

#2楼

You're not the first to ask this question :) Let me clarify a couple of things before getting to your questions. 你不是第一个提出这个问题的人:)让我在回答你的问题之前澄清一些事情。

Polymer's webcomponents.js is a library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella. Polymer的webcomponents.js是一个库，其中包含多个用于各种W3C API的webcomponents.js ，这些API属于Web Components的webcomponents.js 。 These are: 这些是：
- Custom Elements 自定义元素
- HTML Imports HTML导入
- <template>
- Shadow DOM 影子DOM
- Pointer Events 指针事件
- others 其他
The left-nav in the documentation ( polymer-project.org ) has a page for all of these "Platform technologies". 文档中的左导航（ polymer-project.org ）有一个所有这些“平台技术”的页面。 Each of those pages also has a pointer to the individual polyfill. 每个页面都有一个指向单个polyfill的指针。
<link rel="import" href="x-foo.html"> is an HTML Import. <link rel="import" href="x-foo.html">是HTML导入。 Imports are a useful tool for including HTML in other HTML. 导入是将HTML包含在其他HTML中的有用工具。 You can include <script> , <link> , markup, or whatever else in an import. 您可以在导入中包含<script> ， <link> ，markup或其他任何内容。
Nothing "links" <x-foo> to x-foo.html. 什么都没有“链接” <x-foo>到x-foo.html。 In your example, it's assumed the Custom Element definition of <x-foo> (eg <element name="x-foo"> ) is defined in x-foo.html. 在您的示例中，假设<x-foo>的自定义元素定义（例如<element name="x-foo"> ）在x-foo.html中定义。 When the browser sees that definition, it's registered as a new element. 当浏览器看到该定义时，它被注册为新元素。

On to questions! 关于问题！

What is the difference between Angular and Polymer? Angular和Polymer有什么区别？

We covered some of this in our Q&A video . 我们在问答视频中介绍了部分内容。 In general, Polymer is a library that aims to use (and show how to use) Web Components. 通常，Polymer是一个旨在使用（并展示如何使用）Web组件的库。 Its foundation is Custom Elements (eg everything you build is a web component) and it evolves as the web evolves. 它的基础是自定义元素（例如，您构建的所有内容都是Web组件），它随着Web的发展而发展。 To that end, we only support the latest version of the modern browsers. 为此，我们仅支持最新版本的现代浏览器。

I'll use this image to describe Polymer's entire architecture stack: 我将使用此图像来描述Polymer的整个架构堆栈：

RED layer: We get tomorrow's web through a set of polyfills. RED层：我们通过一组polyfill获得明天的网络。 Keep in mind, those libraries go away over time as browsers adopt the new APIs. 请记住，随着浏览器采用新API，这些库会随着时间的推移而消失。

YELLOW layer: Sprinkle in some sugar with polymer.js. 黄色层：用聚合物撒上一些糖.js。 This layer is our opinion on how to use the spec'd APIs, together. 这一层是我们对如何一起使用spec'd API的看法。 It also adds things like data-binding, syntatic sugar, change watchers, published properties...We think these things are helpful for building web component-based apps. 它还添加了数据绑定，合成糖，变更观察者，已发布属性等内容......我们认为这些内容有助于构建基于Web组件的应用程序。

GREEN: The comprehensive set of UI components (green layer) is still in progress. GREEN：全面的UI组件（绿色层）仍在进行中。 These will be web components that use all of the red + yellow layers. 这些将是使用所有红色+黄色层的Web组件。

Angular directives vs. Custom Elements? 角度指令与自定义元素？

See Alex Russell's answer . 见Alex Russell的回答。 Basically, Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML. 基本上，Shadow DOM允许组合HTML，但也是封装HTML的工具。 This is fundamentally a new concept on the web and something other frameworks will leverage. 这基本上是Web上的一个新概念，也是其他框架将利用的东西。

What problems does Polymer solve that AngularJS has not or will not? Polymer解决AngularJS没有或不会有什么问题？

Similarities: declarative templates, data binding. 相似之处：声明性模板，数据绑定。

Differences: Angular has high level APIs for services, filters, animations, etc., supports IE8, and at this point, is a much more robust framework for building production apps. 差异：Angular具有用于服务，过滤器，动画等的高级API，支持IE8，此时，它是用于构建生产应用程序的更强大的框架。 Polymer is just starting out in alpha. 聚合物刚刚开始使用alpha。

Are there plans to tie Polymer in with AngularJS in the future? 是否有计划在未来将Polymer与AngularJS联系起来？

They're separate projects . 他们是独立的项目。 That said, both the Angular and Ember teams announced they'll eventually move to using the underlying platform APIs in their own frameworks. 也就是说，Angular和Ember团队都宣布他们最终将在自己的框架中使用底层平台API。

^ This is a huge win IMO. ^这是一个巨大的胜利IMO。 In a world where web developers have powerful tools (Shadow DOM, Custom Elements), framework authors also can utilize these primitives to create better frameworks. 在Web开发人员拥有强大工具（Shadow DOM，Custom Elements）的世界中，框架作者也可以利用这些原语来创建更好的框架。 Most of them currently go through great hoops to "get the job done". 他们中的大多数人目前正在努力“完成工作”。

UPDATE: 更新：

There's a really great article on this topic: " Here's the difference between Polymer and Angular " 关于这个话题有一篇非常好的文章：“ 这是Polymer和Angular之间的区别 ”

#3楼

For your question: 对于你的问题：

Are there plans to tie Polymer in with AngularJS in the future? 是否有计划在未来将Polymer与AngularJS联系起来？

From the official twitter account of AngularJS : "angularjs will use polymer for its widgets. It's win-win" 来自AngularJS的官方推特账号：“angularjs将使用聚合物作为其小部件。它是双赢的”

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

#4楼

In this video 2 guys from AngularJS talked about differences and similarities about this two frameworks (AngularJS 1.2 and Beyond). 在这个视频中，来自AngularJS的2个人谈到了关于这两个框架（AngularJS 1.2和Beyond）的差异和相似之处。

These links will bring you to the correct Q&A's: 这些链接将带您进入正确的问答：

http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=56m34s http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=56m34s
http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=59m8s http://www.youtube.com/watch?v=W13qDdJDHp8&feature=share&t=59m8s

#5楼

I think from a practical perspective, in the end the template feature of angular directives, and the web component methodology leveraged by polymer both accomplish the same task. 我认为从实际角度来看，最终角度指令的模板特征和聚合物利用的Web组件方法都可以完成相同的任务。 The major differences as I can see it are that polymer leverages web APIs to include bits of HTML, a more syntactically correct, and simplistic way of achieving what Angular does programatically as it renders templates. 我可以看到的主要差异是聚合物利用Web API包含一些HTML，一种语法更正确，更简单的方式来实现Angular在呈现模板时以编程方式执行的操作。 Polymer is however as has been stated, a small framework for building declarative and interactive templates using components. 然而，正如所述，Polymer是一个用于使用组件构建声明性和交互式模板的小框架。 It is made available for UI design purposes only, and is only supported in the most modern browsers. 它仅用于UI设计，仅在最现代的浏览器中受支持。 AngularJS is a complete MVC framework designed to make web applications declarative by use of data bindings, dependencies, and directives. AngularJS是一个完整的MVC框架，旨在通过使用数据绑定，依赖项和指令使Web应用程序声明。 They're two completely different animals. 他们是两种完全不同的动物。 To your question, it seems to me at this point you'll get no major benefit from using polymer over angular, except having dozens of pre built components, however that would still require you to port those over to angular directives. 对于你的问题，在我看来，除了拥有数十个预先构建的组件之外，你在使用聚合物超过角度方面没有任何好处，但是仍然需要你将它们移植到角度指令上。 In the future however, as the web APIs become more advanced, web components will completely remove the need to programatically define and build templates as the browser will be able to simply include them in a similar way to how it handles javascript or css files. 然而，在将来，随着Web API变得更加先进，Web组件将完全消除以编程方式定义和构建模板的需要，因为浏览器将能够以与处理javascript或css文件的方式类似的方式简单地包含它们。

#6楼

1 & 2) Polymer components are scoped because of their hidden tree in the shadow dom. 1＆2）聚合物组件的范围是因为它们在阴影dom中隐藏了树。 That means that their style and behaviour cannot bleed out. 这意味着他们的风格和行为不会流血。 Angular is not scoped to that particular directive you create like a polymer web component. Angular的范围不是您创建的特定指令，如聚合物Web组件。 An angular directive could possibly conflict with something in your global scope. 角度指令可能与您的全局范围内的某些内容发生冲突。 IMO the benefit you will get from polymer is what I explained.. modular components that have scoped css & JavaScript to that particular component that nothing can touch. IMO从聚合物中获得的好处就是我所解释的......模块化组件，它将css和JavaScript作用于特定组件，没有任何东西可以触及。 Untouchable DOM! 不可触摸的DOM！

Angular directives can be created so that you can annotate an element with several pieces of functionality. 可以创建Angular指令，以便您可以使用多个功能注释元素。 In Polymer web components that is not the case. 在Polymer web组件中并非如此。 If you want to combine functionality of components you include two components into another component (or wrap them in another component) or you can extend an existing component. 如果要组合组件的功能，则将两个组件包含在另一个组件中（或将它们包装在另一个组件中），或者可以扩展现有组件。 Remember the main difference still is that each component is scoped in polymer web components. 请记住，主要区别仍在于每个组件都在聚合物网络组件中作用域。 You can share css & js files across several components or you can inline them. 您可以跨多个组件共享css和js文件，也可以内联它们。

3) Yes, Angular plans on incorporating polymer in version 2+ according to Rob Dodson and Eric Bidelman 3）是的，根据Rob Dodson和Eric Bidelman的说法，Angular计划将聚合物纳入2+版本

It's funny how nobody here has mentioned the word scope. 有趣的是，这里没有人提到范围这个词。 I think that is one of the major differences. 我认为这是主要的差异之一。

There are many differences, but they also have a heck of a lot in common when it comes to creating modular lego like pieces of functionality for an app. 有许多不同之处，但在创建模块化乐高时，它们也有很多共同点，就像应用程序的功能部分一样。 I think it's safe to say that Angular would be the application framework and polymer could one day live in the same app along side directives with the major difference being scope but polymer may be a replacement for a lot of your current directives. 我认为可以说Angular是应用程序框架，聚合物有一天可能会在同一个应用程序中与副指令一起生活，主要区别在于范围，但聚合物可能是许多当前指令的替代品。 But I see no reason why Angular could not work as-is and include polymer components as well. 但我认为没有理由为什么Angular不能按原样工作，也包括聚合物组件。

Reading through the answers again while I write this, I noticed that Eric Bidelman(ebidel) did kind of cover that in his answer : 在我写这篇文章时再次阅读答案时，我注意到Eric Bidelman（ebidel）在他的回答中做了一些掩饰：

"Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML." “Shadow DOM允许组合HTML，但也是封装HTML的工具。”

To give credit where credit is due, I got my answers from listening to many interviews with Rob Dodson and Eric Bidelman . 为了给予信用到期的信用，我通过听取Rob Dodson和Eric Bidelman的许多采访得到了我的答案。 But I feel the answer wasn't worded to give this guy's question the understanding that he wanted. 但是我觉得答案并不是说这个人的问题是他想要的理解。 With that said, I think I have touched on the answer he is looking for, but in no way do I possess more information about the subject than Rob Dodson and Eric Bidelman 话虽如此，我想我已经触及了他正在寻找的答案，但我绝不比Rob Dodson和Eric Bidelman拥有更多关于这个主题的信息。

Here are my main sources for the information I have gathered. 以下是我收集的信息的主要来源。

JavaScript Jabber - Polymer with Rob Dodson and Eric Bidelman JavaScript Jabber - Rob Dodson和Eric Bidelman的聚合物

Shop Talk Show - Web Components With Rob Dodson 商店脱口秀 - Rob Dodson的Web组件

Polymer元素和AngularJS指令有什么区别？相关推荐

AngularJS指令范围中的#39;@#39;和#39;=#39;有什么区别？
本文翻译自:What is the difference between '@' and '=' in directive scope in AngularJS? I've read the Angu ...
AngularJS 指令实践指南（二）
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
【转】angularjs指令中的compile与link函数详解
这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下通常大家在使用 ...
AngularJS 指令
1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...
如何调用AngularJS指令中定义的方法？
本文翻译自:How to call a method defined in an AngularJS directive? I have a directive, here is the code : ...
AngularJS学习笔记二:AngularJS指令
AngularJS 指令: AngularJS 通过被称为指令的新属性来扩展 HTML. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. 几个常用指令: ng-app 指令 ...
AngularJS指令封装高德地图组件
2019独角兽企业重金招聘Python工程师标准>>> 1 概述公司移动门户原来是基于AngularJS指令封装的百度地图组件,用于签到.签退.定位等功能,在使用过程中发现百度地图 ...
css隐藏元素的几种方法与区别
css隐藏元素的几种方法与区别一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方.二:position:absol ...
[html] 说下你对组件、模块、元素的理解，它们的区别在哪里？
[html] 说下你对组件.模块.元素的理解,它们的区别在哪里? 元素:元素是网页的一部分,在 XML 和 HTML 中,一个元素可以包含一个数据详情或者是一块文本或者是一张照片,亦或是什么也不包含. ...

Polymer元素和AngularJS指令有什么区别？

#1楼

#2楼

#3楼

#4楼

#5楼

#6楼

Polymer元素和AngularJS指令有什么区别？相关推荐

最新文章

热门文章