聚合物元素和AngularJS指令有什么区别？

javascript angularjs polymer

2022-08-29 23:04:15

在“聚合物入门”页面上，我们看到了一个聚合物的实际应用示例：

<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.jsx-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没有或不会解决的哪些问题？
未来是否有计划将聚合物与AngularJS联系起来？

答案 1

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

Polymer是一个库，其中包含属于Web Components保护伞下的各种W3C API的几个polyfill。这些是：webcomponents.js
- 自定义元素
- HTML 导入
- <template>
- Shadow DOM
- 指针事件
- 别人
文档（polymer-project.org）中的左侧导航有一个页面，用于所有这些“平台技术”。这些页面中的每一个都有一个指向单个polyfill的指针。
<link rel="import" href="x-foo.html">是 HTML 导入。导入是将 HTML 包含在其他 HTML 中的有用工具。您可以在导入中包含、、标记或其他任何内容。<script><link>
没有任何东西“链接”到x-foo.html。在您的示例中，假设（例如）的自定义元素定义是在 x-foo 中定义的.html。当浏览器看到该定义时，它将注册为新元素。<x-foo><x-foo><element name="x-foo">

关于问题！

Angular和Polymer有什么区别？

我们在问答视频中介绍了其中的一些内容。通常，Polymer是一个旨在使用（并展示如何使用）Web组件的库。它的基础是自定义元素（例如，您构建的所有内容都是Web组件），并且随着Web的发展而发展。为此，我们只支持最新版本的现代浏览器。

我将使用此图像来描述 Polymer 的整个架构堆栈：

enter image description here

RED层：我们通过一组polyfills获得明天的web。请记住，随着浏览器采用新的 API，这些库会随着时间的推移而消失。

黄色层：撒上一些含聚合物的糖.js。这一层是我们对如何一起使用规范 API 的看法。它还添加了诸如数据绑定，语法糖，更改观察器，已发布属性之类的内容...我们认为这些东西有助于构建基于Web组件的应用程序。

绿色：全面的 UI 组件集（绿色层）仍在进行中。这些将是使用所有红色+黄色图层的Web组件。

角度指令与自定义元素？

看看Alex Russell的答案。基本上，Shadow DOM允许编写HTML的片段，但也是封装HTML的工具。这基本上是网络上的一个新概念，也是其他框架将利用的东西。

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

相似之处：声明性模板，数据绑定。

区别：Angular具有用于服务，滤镜，动画等的高级API，支持IE8，在这一点上，它是用于构建生产应用程序的更强大的框架。Polymer刚刚开始阿尔法。

未来是否有计划将聚合物与AngularJS联系起来？

它们是独立的项目。也就是说，Angular和Ember团队都宣布，他们最终将在自己的框架中使用底层平台API。

^ 这是IMO的一大胜利。在Web开发人员拥有强大工具（Shadow DOM，Custom Elements）的世界中，框架作者也可以利用这些原语来创建更好的框架。他们中的大多数人目前都经历了巨大的箍来“完成工作”。

更新：

关于这个话题，有一篇非常棒的文章：“这就是聚合物和Angular之间的区别。"

答案 2

对于您的问题：

未来是否有计划将聚合物与AngularJS联系起来？

来自AngularJS的官方推特账户：“Angularjs将使用聚合物作为其小部件。这是双赢的”

来源： https://twitter.com/angularjs/status/335417160438542337