AngularJS自包含指令供设计人员使用

瑞安·兰顿(Ryan Langton)

我正在使用一个Web应用程序,该应用程序允许设计人员通过与自己和其他开发人员创建的angularjs指令结合编写html来创建页面。我正在努力用数据填充指令的最佳方法。

最初的尝试是使所有指令完全独立。因此,例如,一个产品页面可能看起来如下所示(所有这些都带有自定义html-为清楚起见,省略了该页面):

<product>
    <product-information></product-information>
    <product-image></product-image>
    <product-quantities></product-quantities>
    <product-add-to-cart-button></product-add-to-cart-button>
</product>

如果指令需要数据(几乎所有指令都需要),则它们将使用服务来调用Web API并获取所需的数据。这种方法出现了一些问题。

  1. 指令通常需要父母或兄弟姐妹提供的一些信息。在下面的示例中,产品图片可能需要ProductID,以便它可以获取正确的图片。在这种情况下,我必须依靠从querystring参数获取该信息或将其存储在最初由父指令填充的angularJS服务中。
  2. 很多API调用。现在,每条指令都使用自己的API调用,最后我的页面加载了15个以上的API调用,而且随着时间的推移,该页面会不断增长。即使很多数据可能紧密相关(即使在同一数据库表中)。显然,这并不理想。

因此,从第二遍开始,我就开始改变我的方法。现在,伪指令就像树形结构一样建立,每个伪指令都希望通过属性传递其数据要求。这是一个例子:

<product-image product-url="vm.product.imageUrl" ng-if="vm.product"></product-image>

这解决了API和数据库调用过多的问题#2,但向设计人员公开了太多内部信息。现在,设计人员必须知道传递product-url,并且必须了解在幕后有一个vm.product。他甚至可能需要了解一些angularJS(ng-if)。我已经看到这种模式甚至在带有Inputs的Angular2中也使用了很多。对于开发人员来说似乎很好,但对于设计人员使用的指令则不是,我们希望隐藏内部工作原理和复杂性,同时赋予设计人员控制布局的力量。

最后,我正在考虑使用父控制器来填充页面上可能需要的所有内容。然后,所有子指令都将像现在一样使用服务,但是已经加载了数据而不是调用API。指令保持简单,并且大多数都是独立的,但是它们的数据加载是由父级触发的。我对此唯一的问题是,由于设计器未使用指令,我们最终可能会加载很多未使用的数据。但是我觉得这是一个必要的权衡。

有没有人建立类似的东西,有没有我可能缺少的方法?

马利克斯

您可以在服务中使用组件树。从设计师友好开始:

<div ng-app="MyApp">
  <product id="1">
    <product-image></product-image>
  </product>
</div>

像这样的东西工作:

angular.module('MyApp', [])

.factory('api', function($q){
  return {
    loadProduct: function(id){
      return $q.when({
        id: id,
    imageUrl: 'http://i2.cdn.turner.com/cnnnext/dam/assets/160407085910-setsuna-main-overlay-tease.jpg'
  })
    }
  };  
})
.component('product', {
  transclude: true,
  bindings: {
    id: '=' 
  },
  template: [
    '<div ng-transclude></div>'
  ].join(''),
  controller: function(api) {
    var self = this;
    this.$onInit = function() {
      self.data = api.loadProduct(this.id);
    };
  }
})
.component('productImage', {
  require: {
    product: '^product'
  },  
  bindings: {
  },
  template: [
    '<pre>{{ $ctrl.url | json }}</pre>'
  ].join(''),
  controller: function() {
    var self = this;
    this.url = false;
    this.$onInit = function() {
      this.product.data.then(function(data){
        self.url = data.imageUrl;
      })
    };
  }
})

看到此CodePen:http ://codepen.io/anon/pen/wGmEKP?editors=1011

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS自包含指令供设计人员使用

来自分类Dev

设计人员的PHP表格

来自分类Dev

设计人员如何应用此CSS类?

来自分类Dev

Android:帮助设计人员手册

来自分类Dev

设计人员如何应用此CSS类?

来自分类Dev

Android:帮助设计人员手册

来自分类Dev

如何使设计人员的静态网页在Rails 4中运行

来自分类Dev

Java设计人员为何在静态上下文中限制使用非静态变量?

来自分类Dev

Java设计人员为何在静态上下文中限制使用非静态变量?

来自分类Dev

可以设计XXX类,但它不是文件中的第一类。Visual Studio要求设计人员使用文件中的第一类

来自分类Dev

Flutter-设计人员/开发人员迭代流程的体系结构

来自分类Dev

方法“ InitializeComponent”中的代码由设计人员生成,不应手动修改

来自分类Dev

设计人员为什么要在Clojure中制作矢量,地图和设置功能?

来自分类Dev

为什么C ++设计人员选择不允许非成员operator()()?

来自分类Dev

如何访问相关记录的属性?(O / R设计人员生成的实体)

来自分类Dev

第一个WPF项目,设计人员无法正常工作

来自分类Dev

为什么Netbeans设计人员将JFrame大小设置为与我指定的大小不同?

来自分类Dev

AngularJS:包含指令模板

来自分类Dev

AngularJS:包含指令模板

来自分类Dev

AngularJS指令模板包含

来自分类Dev

AngularJS指令包含

来自分类Dev

嵌入式字体适用于设计人员,但不适用于应用程序

来自分类Dev

hdf5设计人员是否解决了与打开.hdf5文件有关的损坏问题?

来自分类Dev

为手机设计人像,为平板电脑设计风景。使用片段

来自分类Dev

仅标题的库设计-包含指令

来自分类Dev

入门angularjs-在指令中包含指令

来自分类Dev

AngularJS指令包含文件内容

来自分类Dev

AngularJS +指令:多个被包含的元素

来自分类Dev

侧栏菜单的AngularJS指令设计模式

Related 相关文章

  1. 1

    AngularJS自包含指令供设计人员使用

  2. 2

    设计人员的PHP表格

  3. 3

    设计人员如何应用此CSS类?

  4. 4

    Android:帮助设计人员手册

  5. 5

    设计人员如何应用此CSS类?

  6. 6

    Android:帮助设计人员手册

  7. 7

    如何使设计人员的静态网页在Rails 4中运行

  8. 8

    Java设计人员为何在静态上下文中限制使用非静态变量?

  9. 9

    Java设计人员为何在静态上下文中限制使用非静态变量?

  10. 10

    可以设计XXX类,但它不是文件中的第一类。Visual Studio要求设计人员使用文件中的第一类

  11. 11

    Flutter-设计人员/开发人员迭代流程的体系结构

  12. 12

    方法“ InitializeComponent”中的代码由设计人员生成,不应手动修改

  13. 13

    设计人员为什么要在Clojure中制作矢量,地图和设置功能?

  14. 14

    为什么C ++设计人员选择不允许非成员operator()()?

  15. 15

    如何访问相关记录的属性?(O / R设计人员生成的实体)

  16. 16

    第一个WPF项目,设计人员无法正常工作

  17. 17

    为什么Netbeans设计人员将JFrame大小设置为与我指定的大小不同?

  18. 18

    AngularJS:包含指令模板

  19. 19

    AngularJS:包含指令模板

  20. 20

    AngularJS指令模板包含

  21. 21

    AngularJS指令包含

  22. 22

    嵌入式字体适用于设计人员,但不适用于应用程序

  23. 23

    hdf5设计人员是否解决了与打开.hdf5文件有关的损坏问题?

  24. 24

    为手机设计人像,为平板电脑设计风景。使用片段

  25. 25

    仅标题的库设计-包含指令

  26. 26

    入门angularjs-在指令中包含指令

  27. 27

    AngularJS指令包含文件内容

  28. 28

    AngularJS +指令:多个被包含的元素

  29. 29

    侧栏菜单的AngularJS指令设计模式

热门标签

归档