在聚合物入门页面，我们看到了一个聚合物的例子:
<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) {
}
};
});
这两者之间有什么区别?
有哪些问题是聚合物解决了，而AngularJS还没有或不会解决的?
将来有计划把Polymer和AngularJS绑定在一起吗?
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. 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. Polymer is however as has been stated, a small framework for building declarative and interactive templates using components. It is made available for UI design purposes only, and is only supported in the most modern browsers. AngularJS is a complete MVC framework designed to make web applications declarative by use of data bindings, dependencies, and directives. 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.
Angular指令在概念上类似于自定义元素，但它们的实现不使用Web组件api。Angular指令是构建自定义元素的一种方式，但Polymer和Web Components规范是基于标准的方式。
polymer-element:
<polymer-element name="user-preferences" attributes="email">
<template>
<img src="https://secure.user-preferences.com/path/{{userID}}" />
</template>
<script>
Polymer('user-preferences', {
ready: function() {
this.userID= md5(this.email);
}
});
</script>
</polymer>
角指令:
app.directive('user-preferences', ['md5', function() {
return {
restrict: 'E',
link: function(scope, element, attrs) {
scope.userID= md5(attrs.email);
},
template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
};
}]);
你不是第一个问这个问题的人:)在回答你的问题之前，让我澄清一些事情。
Polymer's webcomponents.js is 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.
回答问题吧!
Angular和Polymer的区别是什么?
我们在问答视频中提到了一些。一般来说，Polymer是一个旨在使用(并展示如何使用)Web组件的库。它的基础是自定义元素(例如，你构建的所有东西都是一个web组件)，它随着web的发展而发展。为此，我们只支持最新版本的现代浏览器。
我将用这张图来描述Polymer的整个架构堆栈:
红色层:我们通过一组填充物得到明天的网。请记住，随着浏览器采用新的api，这些库会随着时间的推移而消失。
黄色层:在聚合物.js中撒一些糖。这一层是我们对如何一起使用指定api的意见。它还添加了数据绑定、语法糖、更改监视器、发布属性……我们认为这些东西有助于构建基于web组件的应用程序。
绿色:UI组件的综合集(绿色层)仍在进行中。这些web组件将使用所有的红色+黄色图层。
Angular指令与自定义元素?
请看Alex Russell的回答。基本上，Shadow DOM允许组合HTML片段，但也是封装HTML的工具。这基本上是web上的一个新概念，其他框架也会加以利用。
有哪些问题是聚合物解决了，而AngularJS还没有或不会解决的?
相似之处:声明式模板、数据绑定。
区别:Angular有用于服务、过滤器、动画等的高级api，支持IE8，在这一点上，它是一个构建生产应用的更健壮的框架。聚合物刚刚起步。
将来有计划把Polymer和AngularJS绑定在一起吗?
它们是独立的项目。也就是说，Angular和Ember团队都宣布，他们最终将在自己的框架中使用底层平台api。
在我看来，这是一个巨大的胜利。在web开发人员拥有强大工具(Shadow DOM, Custom Elements)的世界中，框架作者也可以利用这些原语来创建更好的框架。他们中的大多数人目前都经历了重重困难才能“完成工作”。
更新:
有一篇关于这个主题的很棒的文章:“这里是聚合物和Angular的区别”
