关于javascript:Polymer元素和AngularJS指令有什么区别?

What is the difference between Polymer elements and AngularJS directives?

在"聚合物入门"页面上,我们看到一个聚合物实际应用的示例:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <!-- 1. Shim missing platform features -->
    <script src="polymer-all/platform/platform.js">
    <!-- 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>

您会注意到,platform.jsx-foo.html定义。

这似乎相当于AngularJS中的指令模块:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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) {
        }
    };
});
  • 这两者有什么区别?

  • 聚合物解决了安格拉尔JS没有或不会解决的问题是什么?

  • 将来是否有计划将聚合物与安古拉基连接起来?


你不是第一个问这个问题的人:)在回答你的问题之前,让我澄清一些事情。

  • Polymer的webcomponents.js是一个库,其中包含多个用于各种w3c API的polyfill,这些API属于Web组件保护伞。这些是:

    • 自定义元素
    • HTML导入