What is the difference between Polymer elements and AngularJS directives?

Question

On the Polymer Getting Started page, we see an example of Polymer in action:

Answer 1

Polymer is a Web Components shim

• "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.

But Polymer is more than a polyfill library for web components...

Polymer also provides open and reusable Web Component building blocks via Elements

All elements can be customized and extended. These are used as building blocks for anything from social widgets to animation to web API clients.

Polymer is not a web application framework

• 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!