Polymer 元素和 AngularJS 指令有什么区别? [英] What is the difference between Polymer elements and AngularJS directives?
问题描述
在 Polymer .基本上，Shadow DOM 允许组合 HTML 位，但也是封装该 HTML 的工具.这从根本上说是网络上的一个新概念，其他框架也会利用这一概念.
Polymer 解决了哪些 AngularJS 没有或不会解决的问题?
相似之处:声明式模板、数据绑定.
区别:Angular 具有用于服务、过滤器、动画等的高级 API，支持 IE8，在这一点上，它是用于构建生产应用程序的更强大的框架.Polymer 刚刚开始测试.
未来是否有计划将 Polymer 与 AngularJS 结合起来?
它们是独立的项目.也就是说，Angular 和 Ember 团队宣布他们最终将转向在自己的框架中使用底层平台 API.
^ 这是 IMO 的巨大胜利.在 Web 开发人员拥有强大工具(Shadow DOM、自定义元素)的世界中，框架作者还可以利用这些原语来创建更好的框架.他们中的大多数人目前都在努力完成工作".
更新:
关于这个主题有一篇非常棒的文章:Polymer 和角度"
On the Polymer Getting Started page, we see an example of Polymer in action:
<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.
It seems like this is the equivalent to a directive module in 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?
Are there plans to tie Polymer in with AngularJS in the future?
You're not the first to ask this question :) Let me clarify a couple of things before getting to your questions.
Polymer's
webcomponents.jsis a library that contains several polyfills for various W3C APIs that fall under the Web Components umbrella. These are:- Custom Elements
- HTML Imports
<template>- Shadow DOM
- Pointer Events
- others
The left-nav in the documentation (polymer-project.org) has a page for all of these "Platform technologies". Each of those pages also has a pointer to the individual polyfill.
<link rel="import" href="x-foo.html">is an HTML Import. Imports are a useful tool for including HTML in other HTML. You can include<script>,<link>, markup, or whatever else in an import.Nothing "links"
<x-foo>to x-foo.html. In your example, it's assumed the Custom Element definition of<x-foo>(e.g.<element name="x-foo">) is defined in 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?
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. Its foundation is Custom Elements (e.g. everything you build is a web component) and it evolves as the web evolves. 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:
RED layer: We get tomorrow's web through a set of polyfills. Keep in mind, those libraries go away over time as browsers adopt the new APIs.
YELLOW layer: Sprinkle in some sugar with polymer.js. This layer is our opinion on how to use the spec'd APIs, together. 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.
GREEN: The comprehensive set of UI components (green layer) is still in progress. These will be web components that use all of the red + yellow layers.
Angular directives vs. Custom Elements?
See Alex Russell's answer. Basically, Shadow DOM allows composing bits of HTML but also is a tool for encapsulating that HTML. This is fundamentally a new concept on the web and something other frameworks will leverage.
What problems does Polymer solve that AngularJS has not or will not?
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. Polymer is just starting out in alpha.
Are there plans to tie Polymer in with AngularJS in the future?
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.
^ This is a huge win 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. 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 元素和 AngularJS 指令有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
