angularjs controller 继承

时间:2023-03-08 16:00:22
angularjs controller 继承

前沿

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

$controller service 实现继承

经过一番查阅资料,发现anguarjs 已经帮我们提供了 controller 继承 。我们只需借助 $controller service 。[\(controller service api](https://docs.angularjs.org/api/ngMock/service/\)controller)

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

代码案例

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当中,只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。