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 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
Javascript document.referrer判断访客来源网址
May 15 Javascript
js截取中英文字符串、标点符号无乱码示例解读
Apr 17 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
高性能JavaScript DOM编程(1)
Aug 11 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
js实现拖拽功能
Mar 01 Javascript
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
php mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
用php实现百度网盘图片直链的代码分享
2012/11/01 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
2017/08/17 jQuery
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
python 异或加密字符串的实例
2018/10/14 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
募捐倡议书怎么写
2014/05/14 职场文书
星级党支部申报材料
2014/05/31 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
Python基础之Socket通信原理
2021/04/22 Python
详解Django的MVT设计模式
2021/04/29 Python
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers