Polymer元素和AngularJS指令之间有什么区别?

JavaScript

蛋蛋猿

2020-03-12

在“聚合物入门”页面上,我们看到了一个正在使用的聚合物示例:

<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联系在一起?

第1115篇《Polymer元素和AngularJS指令之间有什么区别?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
卡卡西米亚 2020.03.12

AngularJS 指令是一种用于制作自定义元素的方法。您可以使用自定义属性定义新的自定义标签。Polymer也可以做到这一点,但它会以一种有趣且更简单的方式进行工作.Polymer实际上并不是一个框架,它只是一个库,而是一个功能强大而令人惊叹的库,您可以爱上它(像我一样)。Polymer让您学习由w3c开发的本机Web组件技术,该Web浏览器最终会实现该技术。Web组件是未来的技术,但是Polymer让您现在就使用该技术。GooglePolymer是一个提供语法糖和polyfill用于构建的库元素和带有Web组件的应用程序。请记住,我说的Polymer不是框架,而是库。但是当您使用Polymer时,实际上您的框架是DOM。这篇文章是关于angular js ver 1和polymer的,我一直与他们一起工作是我的项目,我个人更喜欢Polymer而不是angularjs。但是Angular版本2与angularjs ver 1的比较完全不同。angular2中的指令具有不同的含义。

神奇Harry 2020.03.12

Angular提供的MVVM(模型视图,视图模型)不是Polymer旨在解决的问题。当您考虑比较Angular和Polymer时,Angular指令提供给您的可组合和可重复使用的特性(自定义标签+关联的逻辑组合)是更合理的比较。Angular是并且将继续是一个更广泛的目标服务框架。

Harry逆天Eva 2020.03.12

对于您的问题:

将来是否有计划将Polymer与AngularJS联系在一起?

来自AngularJS的官方Twitter帐户:“ angularjs将使用聚合物作为其小部件。这是双赢的”

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

逆天Green古一 2020.03.12

1&2)由于聚合物组件在阴影域中是隐藏的树,因此对其作用域进行了分类。这意味着他们的风格和行为无法流血。Angular的范围不像您创建的特定指令(如聚合物Web组件)。角度指令可能会与全局范围内的某些内容冲突。IMO,您将从聚合物中获得的好处就是我所解释的..模块化组件将css和JavaScript的范围限定为没有任何接触的特定组件。不可修改的DOM!

可以创建Angular指令,以便您可以使用多个功能来注释元素。在聚合物网组件中并非如此。如果要组合组件的功能,则可以将两个组件包含在另一个组件中(或将它们包装在另一个组件中),也可以扩展现有组件。请记住,主要区别仍然是每个组件都在聚合物纤网组件中。您可以在多个组件之间共享css和js文件,也可以内联它们。

3)是的,据Rob Dodson和Eric Bidelman所述,Angular计划将聚合物添加到版本2+中

有趣的是,这里没有人提到作用域一词。我认为这是主要区别之一。

有很多差异,但是在创建类似于应用程序功能的模块化乐高玩具时,它们也有很多共同点。我认为可以肯定地说,Angular是应用程序框架,有一天聚合物可能会与附带指令一起生活在同一个应用程序中,主要区别是范围,但聚合物可能会替代您当前的许多指令。但是我认为Angular不能按原样工作并且也不能包含聚合物组件。

在写这篇文章时,再次通读了答案,我注意到Eric Bidelman(ebidel)在他的答案中做了某种掩饰

“ Shadow DOM可以组成HTML的一部分,但它也是封装HTML的工具。”

为了在应有的信誉上获得荣誉,我听了Rob DodsonEric Bidelman的多次采访后得到了答案但是我觉得没有用答案来表达这个人的问题,这是他想要的理解。话虽如此,我想我已经触及了他正在寻找的答案,但是与Rob Dodson和Eric Bidelman相比,我绝对没有关于该主题的更多信息。

这是我收集的信息的主要来源。

JavaScript Jabber-Rob Dodson和Eric Bidelman撰写的Polymer

商店脱口秀-Rob Dodson的Web组件

Jim前端Near 2020.03.12

我认为从实际角度来看,最终角度指令的模板功能以及聚合物利用的Web组件方法都可以完成相同的任务。我看到的主要区别在于,Polymer利用Web API来包含HTML的某些部分,这是一种语法正确,简化的方法,可以实现Angular在渲染模板时以编程方式实现的功能。但是,如前所述,Polymer是一个使用组件构建声明性和交互式模板的小型框架。它仅可用于UI设计,并且仅在最现代的浏览器中受支持。AngularJS是一个完整的MVC框架,旨在通过使用数据绑定,依赖项和指令使Web应用程序具有声明性。他们是两只完全不同的动物。对你的问题 在我看来,到目前为止,使用聚合物比使用angular不会带来什么大的好处,除了拥有数十个预先构建的组件外,但是仍然需要您将它们移植到angular指令上。但是,在将来,随着Web API变得更加高级,Web组件将完全不需要以编程方式定义和构建模板,因为浏览器将能够以类似于处理javascript或CSS文件的方式简单地包含它们。

Tom老丝Pro 2020.03.12

在此视频中,来自AngularJS的2个人讨论了这两个框架(AngularJS 1.2和Beyond)的异同。

这些链接将带您进入正确的问答页面:

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android