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当中,只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。