How does Polymer JS differ from Angular JS.?
Angular JS is a complete framework for building web applications, whereas Polymer JS is a library for creating Web Components. Those components, however, can then be used to build a webapp.
Angular directives are conceptually similar to Custom Elements but they are implemented without the use of the Web Components APIs. Angular directives are a way to build custom elements, but Polymer and the Web Components specification are the standard way to do.
Similar to Angular, Polymer elements provide templating and bi-directional data binding. However, they also provide new functionality such as the Shadow DOM, which enables encapsulation of CSS. Angular directives don’t have any notion of style encapsulation, but Angular is expected incorporate that functionality eventually.
A comparison of an element that renders a Gravatar written as a Polymer Custom Element and as an Angular directive.
Polymer Element:
<polymer-element name=”user-gravatar” attributes=”email”>
<template>
<img src=”https://secure.gravatar.com/avatar/{{gid}}” />
</template>
<script>
Polymer(‘user-gravatar’, {
ready: function() {
this.gid = md5(this.email);
}
});
</script>
</polymer>
Angular Directive:
app.directive(‘user-gravatar’, [‘md5′, function() {
return {
restrict: ‘E’,
link: function(scope, element, attrs) {
scope.gid = md5(attrs.email);
},
template: ‘<img src=”https://gravatar.com/avatar/{{gid}}” />’
};
}]);