首页 > 软件开发 > JavaScript >

AngularJS中controller控制器继承的使用方法

来源:互联网 2023-03-16 23:57:23 475

在angularjs项目当中,看到 controller 好多都是重复性的代码,在 controller 当中有好多代码很相似 function(比如 controller 下的 CRUD 方法),重复性工作太多。后来想,可不可以提出一个service ,但仔细想想,这些CRUD 本来就是从 Service 中调用的,如果在提出Service,会造成 Service 比较混乱,职责不清晰 。 因为自己做过一些后端,借助后端的思想,是不是可以 controller 继承。4Dr办公区 - 实用经验教程分享!

AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

工具/原料

  • JavaScript

方法/步骤

  • 1

    嵌套控制器中属性是如何被继承的4Dr办公区 - 实用经验教程分享!

    属性值是字符串4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 1该信息未经许可获取自百度经验
  • 2

    ParentCtrl中的name字段被ChildCtrl分享,但改变ChildCtrl中的name字段值却不会影响ParentCtrl中的name值,当改变ChildCtrl中的name值,ParentCtrl和ChildCtrl的嵌套关系被打破,再次改变ParentCtrl中的name字段值也不会影响ChildCtrl中的name值。4Dr办公区 - 实用经验教程分享!

    给ParentCtrl中的变量赋值是字符串类型,如果给ParentCtrl中的字段赋值对象类型4Dr办公区 - 实用经验教程分享!

    属性值是对象4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 3

    ParentCtrl中vm对象的被ChildCtrl分享,当然也分享了对象中的name字段,当改变ChildCtrl中的vm.name值会影响到ParentCtrl,也就是不会把ParentCtrl和ChildCtrl之间的嵌套关系打破。4Dr办公区 - 实用经验教程分享!

    嵌套控制器中方法是如何被继承的4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 4

    使用ArrayCtrl中的add方法,添加没问题;而且ArrayCtrl中的add方法也可以被CollctionCtrl使用;4Dr办公区 - 实用经验教程分享!

    而且在子控制器中可以重写父控制器中的方法。4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 5

    代码案例4Dr办公区 - 实用经验教程分享!

    1.创建一个 base.controller.js 文件4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 6

    代码很简单,我们在 BaseController中提供了一个简单的 formValid() 方法,还初始化调用了一个getList() 方法。4Dr办公区 - 实用经验教程分享!

    2.创建一个Service 。这个 service 来提供数据服务4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 7

    3.创建child.controller.js 文件 也就是我们最主要的一个文件4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 8

    通过 $controller service 实现了 controller 的继承 ,也可以把 child controller 需要的注入的服务 传入到 base controller 当中 。({ $scope, $scope,CRUDServices:ExtendServices }),我们child controlller 一行代码都没有写,就已经用了 获取 列表的 magic power 。如果需要调用表单验证,直接调用 vm.bFormValid() 就可以。4Dr办公区 - 实用经验教程分享!

    4.创建child.html 文件直接绑定就ok4Dr办公区 - 实用经验教程分享!

    AngularJS中controller控制器继承的使用方法4Dr办公区 - 实用经验教程分享!

  • 9

    这样下来以后可以提出一个 公共的 controller ,封装一些常用的方法,在 controller当中,只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。4Dr办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4Dr办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码