在聚合物入门页面，我们看到了一个聚合物的例子:
<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绑定在一起吗?
你不是第一个问这个问题的人:)在回答你的问题之前，让我澄清一些事情。
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的区别”
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}}" />'
};
}]);
