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


Posted in Javascript onNovember 03, 2017

前沿

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

 controllerservice实现继承经过一番查阅资料,发现AngularJS已经帮我们提供了controller继承。我们只需借助 controllerservice 。$controller service api

// 参数的解释
// constructor 可以是 function 也可以是 string 
//      如果传入一个 function, 就会当成 controller 的构造函数
//      如果传入一个 string,就会根据字符串去$controllerProvider 找 注册的 controller
//locals 是一个对象,注入来自局部的 controller ,在这里我们认为 child controller
$controller(constructor, locals, [bindings])

嵌套控制器中属性是如何被继承的?

==属性值是字符串

myApp.controller("ParentCtrl", function($scope){
  $scope.name = "darren";
})

myApp.controller("ChildCtrl", function($scope){

})

<div ng-controller="ParentCtrl">
  <label>父控制器中的name变量值</label> <input ng-model="name" />
  <div ng-controller="ChildCtrl">
     <label>子控制器中的name变量值</label> <input ng-model="name" />
     
     <ul>
      <li>child controller name: {{name}}</li>
      <li>parent controller name: {{$parent.name}}</li>
     </ul>
  </div>
</div>

以上,ParentCtrl中的name字段被ChildCtrl分享,但改变ChildCtrl中的name字段值却不会影响ParentCtrl中的name值,当改变ChildCtrl中的name值,ParentCtrl和ChildCtrl的嵌套关系被打破,再次改变ParentCtrl中的name字段值也不会影响ChildCtrl中的name值。

以上,给ParentCtrl中的变量赋值是字符串类型,如果给ParentCtrl中的字段赋值对象类型呢?

==属性值是对象

myApp.controller("ParentCtrl", function($scope){
  $scope.vm = {
    name: "John"
  };
})

myApp.controller("ChildCtrl", function($scope){

})

<div ng-controller="ParentCtrl">
  <label>父控制器中的vm.name变量值</label> <input ng-model="vm.name" />
  <div ng-controller="ChildCtrl">
     <label>子控制器中的vm.name变量值</label> <input ng-model="vm.name" />
     
     <ul>
      <li>child controller name: {{vm.name}}</li>
      <li>parent controller name: {{$parent.vm.name}}</li>
     </ul>
  </div>
</div>

以上,ParentCtrl中vm对象的被ChildCtrl分享,当然也分享了对象中的name字段,当改变ChildCtrl中的vm.name值会影响到ParentCtrl,也就是不会把ParentCtrl和ChildCtrl之间的嵌套关系打破。

嵌套控制器中方法是如何被继承的?

myApp.controller("ArrayCtrl", function($scope){
  $scope.myArray = ["John", "Andrew"];
  
  $scope.add = function(name){
    $scope.myArray.push(name);
  }
})

myApp.controller("CollectionCtrl", function($scope){

})

<div ng-controller="ArrayCtrl">
  <label>My Array:</label><span>{{myArray}}</span>
  
  <label>parent controller:</label>
  <input ng-model="parentName" />
  <button ng-click="add(parentName)">Add New Item</button>
  
  <div ng-controller="CollectionCtrl">
    <label>child controller:</label>
    <input ng-model="childName" />
    <input type="number" ng-model="index" />
    <button ng-click="add(childName)">Add New Item</button>
  </div>
</div>

使用ArrayCtrl中的add方法,添加没问题;而且ArrayCtrl中的add方法也可以被CollctionCtrl使用;

而且在子控制器中可以重写父控制器中的方法。

myApp.controller("CollectionCtrl", function($scope){
  //插入到某个位置
  $scope.add = function(name, index){
    $scope.myArray.splice(index,0, name);
  }
})

<div ng-controller="ArrayCtrl">
  <label>My Array:</label><span>{{myArray}}</span>
  
  <label>parent controller:</label>
  <input ng-model="parentName" />
  <button ng-click="add(parentName)">Add New Item</button>
  
  <div ng-controller="CollectionCtrl">
    <label>child controller:</label>
    <input ng-model="childName" />
    <input type="number" ng-model="index" />
    <button ng-click="add(childName, index)">Add New Item</button>
  </div>
</div>

代码案例

1.创建一个 base.controller.js 文件

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .controller('BaseCtrl', BaseCtrl);

  //手动注入一些服务
  BaseCtrl.$inject = ['$scope','CRUDServices'];

  /* @ngInject */
  function BaseCtrl($scope,CRUDServices) {
    var _this = this;
    //当前 controller 提供一些方法
    _this.bFormValid = formValid;

    activate();

    ////////////////

    //初始化时候调用
    function activate() {

      getList();
    }

    // 获取数据列表
    function getList() {
      //把当前的结果赋值给 bList 属性上
      _this.bList = CRUDServices.getList();
    }

    // 表单验证
    function formValid(){

      //do some thing
      return false;
    }
  }
})();

代码很简单,我们在 BaseController中提供了一个简单的 formValid() 方法,还初始化调用了一个getList() 方法。

2.创建一个Service 。这个 service 来提供数据服务

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .service('ExtendServices', ExtendServices);

  ExtendServices.$inject = [];

  /* @ngInject */
  function ExtendServices() {

    return {
      getList: getList  //获取 list 列表
    }

    ////////////////

    function getList() {
      return [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]
    }
  }
})();

3.创建child.controller.js 文件 也就是我们最主要的一个文件

(function() {
  'use strict';

  angular
    .module('DemoApp')
    .controller('ChildCtrl', ChildCtrl);

  //手动注入一些服务
  //ExtendServices 用来提供数据的 Servie
  ChildCtrl.$inject = ['$scope', '$controller','ExtendServices'];

  /* @ngInject */
  function ChildCtrl($scope, $controller,ExtendServices) {

    var vm = this;

    //调用我们父 controller 
    var parentCtrl = $controller('BaseCtrl', { $scope, $scope,CRUDServices:ExtendServices })

    //通过 angular.extend 把父控制器上的 方法和属性 绑定到 子的对象上
    angular.extend(vm, parentCtrl);


    activate();

    ////////////////

    function activate() {
      
      //调用表单验证方法
      vm.bFormValid();      
      
    }
  }
})();

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

4.创建child.html 文件 ,我们直接 绑定就ok

<div>
  <!-- 直接绑定 vm.bList 就会看到输出结果-->
  <div ng-repeat="item in vm.bList">{{item}}</div>
</div>

结束语

这样下来以后我们可以提出一个 公共的 controller ,封装一些常用的方法,在 controller当中,只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vuex 的简单使用
Mar 22 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 #Javascript
React-intl 实现多语言的示例代码
Nov 03 #Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 #Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 #Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 #Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 #Javascript
微信小程序自动客服功能
Nov 02 #Javascript
You might like
PHP如何抛出异常处理错误
2011/03/02 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PDO::prepare讲解
2019/01/29 PHP
LBS blog sql注射漏洞[All version]-官方已有补丁
2007/08/26 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
js控制table合并具体实现
2014/02/20 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python中static相关知识小结
2018/01/02 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
在python中使用nohup命令说明
2020/04/16 Python
Python内置函数property()如何使用
2020/09/01 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
同事吵架检讨书
2014/02/05 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫