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?
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 Shadow DOM Pointer Events others The left-nav in the documentation (polymer-project.org) has a page for all of these "Platform technologies". Each of those pages also has a pointer to the individual polyfill. is an HTML Import. Imports are a useful tool for including HTML in other HTML. You can include