What is the difference between Polymer elements and AngularJS directives?

by

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

<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="https://stackoverflow.com/questions/18089075/polymer-all/platform/platform.js"></script>
    <!-- 2. Load a component -->
    <link rel="import" href="https://stackoverflow.com/questions/18089075/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?

10 s
10

Leave a Comment