What is the difference between Polymer elements and AngularJS directives?

javascript angularjs polymer

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

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

What you will notice is <x-foo></x-foo> being defined by platform.js and x-foo.html.

It seems like this is the equivalent to a directive module in 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) {
        }
    };
});

What is the difference between the two?

What problems does Polymer solve that AngularJS has not or will not?

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

Usefule information here 2ality - The roles of AngularJS and Polymer

Ben

You're not the first to ask this question :) Let me clarify a couple of things before getting to your questions.

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