Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
305 views
in Technique[技术] by (71.8m points)

javascript - 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.jsx-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联系起来?)   ask by Dan Kanze translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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之间的区别 ”)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...