前沿

最近在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)

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

代码案例

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

  1. (function() {
  2. 'use strict';
  3. angular
  4. .module('DemoApp')
  5. .controller('BaseCtrl', BaseCtrl);
  6. //手动注入一些服务
  7. BaseCtrl.$inject = ['$scope','CRUDServices'];
  8. /* @ngInject */
  9. function BaseCtrl($scope,CRUDServices) {
  10. var _this = this;
  11. //当前 controller 提供一些方法
  12. _this.bFormValid = formValid;
  13. activate();
  14. ////////////////
  15. //初始化时候调用
  16. function activate() {
  17. getList();
  18. }
  19. // 获取数据列表
  20. function getList() {
  21. //把当前的结果赋值给 bList 属性上
  22. _this.bList = CRUDServices.getList();
  23. }
  24. // 表单验证
  25. function formValid(){
  26. //do some thing
  27. return false;
  28. }
  29. }
  30. })();

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

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

  1. (function() {
  2. 'use strict';
  3. angular
  4. .module('DemoApp')
  5. .service('ExtendServices', ExtendServices);
  6. ExtendServices.$inject = [];
  7. /* @ngInject */
  8. function ExtendServices() {
  9. return {
  10. getList: getList //获取 list 列表
  11. }
  12. ////////////////
  13. function getList() {
  14. return [{ id: 1, name: '张三' }, { id: 2, name: '李四' }]
  15. }
  16. }
  17. })();

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

  1. (function() {
  2. 'use strict';
  3. angular
  4. .module('DemoApp')
  5. .controller('ChildCtrl', ChildCtrl);
  6. //手动注入一些服务
  7. //ExtendServices 用来提供数据的 Servie
  8. ChildCtrl.$inject = ['$scope', '$controller','ExtendServices'];
  9. /* @ngInject */
  10. function ChildCtrl($scope, $controller,ExtendServices) {
  11. var vm = this;
  12. //调用我们父 controller
  13. var parentCtrl = $controller('BaseCtrl', { $scope, $scope,CRUDServices:ExtendServices })
  14. //通过 angular.extend 把父控制器上的 方法和属性 绑定到 子的对象上
  15. angular.extend(vm, parentCtrl);
  16. activate();
  17. ////////////////
  18. function activate() {
  19. //调用表单验证方法
  20. vm.bFormValid();
  21. }
  22. }
  23. })();

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

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

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

结束语

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

angularjs controller 继承的更多相关文章

  1. 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...

  2. [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承

    关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...

  3. Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  4. 【转】Angularjs Controller 间通信机制

    在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...

  5. (十六)JQuery Ready和angularJS controller的运行顺序问题

    项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...

  6. ASP.NET MVC:如何提供 Controller 继承体系使用的 ModelBinder?

    背景 Mvc 提供了一种可扩展的模型绑定机制,具体来说就是:将客户端传递的参数按照一定的策略绑定到 action 的参数上,这带来的直接好处就是让 action 的参数支持强类型.一般来说我们有如下方 ...

  7. AngularJS 'Controller As'用法

    AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...

  8. 夺命雷公狗—angularjs—4—继承和修正继承

    angularjs 中也有继承的方法,废话不多说,看代码: <!doctype html> <html lang="en"> <head> &l ...

  9. Animator Controller 继承关系

    准备知识 对于Animator Controller中蜘蛛网一样的几十条连线,后续如果靠人工维护,那成本将是很大. AnimatorOverrideController组件的文档:https://do ...

随机推荐

  1. 命名规范(数据库,c#)

    Ⅰ.  Naming Conventions 1. Table Naming Rule 1a ( Prefix) 新加的Table要加上適當的前缀 e.g.  mUsr, eTxn, tmpRolle ...

  2. 模拟CSS3 多组位移运动属性的框架封装

    obj是将要运动的对象,json是运动完成时的位移结果. 封装要点: 1.定时器开关flag的定义要放在for in结构的外面,否则,每遍历一次,都会定义一个 新的flag 2.if(current ...

  3. 使用Git的Push出现rejected - non-fast-forward错误

    通过查阅资料,发现是文件冲突问题,即本地和远程的Repository中的文件出现了冲突所致,重新检查了一下,发现是在建立Repository时,添加了ReadMe.txt文件,导致和本地得项目分支不一 ...

  4. Linux 常识

    一.Linux 各目录及每个目录的详细介绍: Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图: /bin 二进制可执行命令 /dev 设备特殊文件 ...

  5. Android图书应用-西游记

    下载App 屏幕截图:          功能介绍:1. 侧边滑动目录导航2. 阅读偏好设置3. 记忆阅读进度 内容介绍: 西游记,中国古典名著,内容分三大部分: 第一部分(一到七回)介绍孙悟空的神通 ...

  6. JavaFX 教程资料收集

    1. JavaFX中文资料 http://www.javafxchina.net/blog/docs/tutorial1/ 2. JavaFX入门教程 http://www.xrpmoon.com/c ...

  7. 移动端Web适配的两种做法思路总结

    看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流 像素相关概念 物理像素(physical pixel) 一个物理像素是显示器(手机屏 ...

  8. Myeclipse 不能保存汉字

    window-->首选项-->content type-->Text-->Default encoding改为UTF-8,点击update

  9. uboot

    ******************************************day:2014/10/14**************************uboot************* ...

  10. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...