在聚合物入门页面，我们看到了一个聚合物的例子:
<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绑定在一起吗?
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}}" />'
};
}]);
聚合物是一种Web Components垫片
"Web Components" is a new set of standards that is enveloped by HTML 5 designed to provide reusable building blocks for web applications.
Browsers are at various states of implementing the "Web Components" specification, and therefore it's too early to write HTML using Web Components.
But alas! Polymer to the rescue! Polymer is a library that provides an abstraction layer to your HTML code, allowing it to make use of the Web Components API as if it were fully implemented in all browsers. This is called poly-filling, and the Polymer team distributes this library as webcomponents.js. This used to be called platform.js btw.
但是Polymer不仅仅是一个web组件的填充库…
Polymer还通过Elements提供开放和可重用的Web组件构建块
所有元素都可以定制和扩展。它们被用作从社交小部件到动画到web API客户端的任何东西的构建块。
Polymer不是一个web应用程序框架
Polymer is more of a library than a framework.
Polymer does not have support for things like routes, application scope, controllers, etc.
But it does have two-way binding, and using components "feels" just like using Angular directives.
Although there are some overlaps between Polymer and AngularJS, they are not the same. In fact, the AngularJS team has mentioned utilizing Polymer libraries in upcoming releases.
Also note that Polymer is still considered "bleeding edge" while AngularJS is stabilizing.
It will be interesting to watch both of these Google projects evolve!
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}}" />'
};
}]);
