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

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.

Answer 2

For your question:

Are there plans to tie Polymer in with AngularJS in the future?

From the official twitter account of AngularJS : "angularjs will use polymer for its widgets. It's win-win"

source : https://twitter.com/angularjs/status/335417160438542337

Answer 3

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 standards-based way to do it.

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>

Angular directive:

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}}" />'
  };
}]);

Answer 4

Angularjs directive is an approach for making custom elements. you can define new custom tags with custom attributes. Polymer can also do this but it'll do in an interesting and more simple way.Polymer actually is not a framework it's just a library.but a powerful and amazing library that you can fall in love with it (like me). Polymer let you learn the native web components technology made by w3c, that web browsers eventually implementing it.web component is the future technology, but polymer let you use that technology right now.Google Polymer is a library that provides syntactic sugar and polyfills for building elements and applications with web components.Remember that I said polymer is not a framework and it's a library.But when you're using Polymer, actually your framework is DOM.this post was about angular js ver 1 and polymer and I has been worked with both of them is my projects and I personally prefer polymer over angularjs. But Angular version 2 is completely different in compare of angularjs ver 1.directive in angular 2 has a different meaning.