Polymer 元素和 AngularJS 指令有什么区别？

javascript angularjs polymer

在 Polymer Getting Started 页面上，我们看到了一个正在运行的 Polymer 示例：

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

您会注意到 <x-foo></x-foo> 是由 platform.js 和 x-foo.html 定义的。

看起来这相当于 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) {
        }
    };
});

两者有什么区别？

Polymer 解决了 AngularJS 没有或不会解决的哪些问题？

未来是否有计划将 Polymer 与 AngularJS 结合起来？

此处提供有用信息2ality - The roles of AngularJS and Polymer

Ben

你不是第一个问这个问题的人:) 在回答你的问题之前，让我先澄清几件事。

Polymer 的 webcomponents.js 是一个库，其中包含多个适用于 Web Components 旗下的各种 W3C API 的 polyfill。它们是：自定义元素 HTML 导入