前沿

最近在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. pythony语法小练习

    i=[0,1] b=[2,3] print(dict([i,b]))#列表转换为字典 题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位 ...

  2. Node.js之NPM工具使用

    1.NPM介绍:包管理工具 (1)允许用户从NPM服务器下载别人编写的第三方包到本地石使用 (2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用 (3)允许用户将自己编写的包或命令行程 ...

  3. PHP 显示文章发布日期 一小时前 一天前 一月前 一年前

    <?PHP /*** 传入日期格式或时间戳格式时间,返回与当前时间的差距,如1分钟前,2小时前,5月前,3年前等* @param string or int $date 分两种日期格式" ...

  4. 使用echarts开发电子屏数据展示页面

    背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...

  5. Linux 用户添加sudo 权限

    编辑/etc/sudoers 搜索root 添加 账号 ALL=(ALL) ALL

  6. ue4 c++学习推荐

    我由易到难推荐,不过在此之前还是先看看官方对于VS设置的推荐: https://docs.unrealengine.com/latest/INT/Programming/Development/Vis ...

  7. 『AngularJS』$location 服务

    项目中关于 $location的用法 简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用.改变在地址栏中的URL会作用到$loc ...

  8. oracle plsql 无法连接 报 ORA-12560: TNS:protocol adapter error

    ORA-12560: TNS:protocol adapter error 添加一个环境变量,名为TNS_ADMIN,值为 tnsnames.ora 文件所在路径.比如我的本机为:D:/instant ...

  9. HTML5 WebSocket

    在WebSocket API中,浏览器和服务器只需要做一个握手动作,然后,浏览器和服务器之间就形成一条快速通道,两者之间就可以直接进行数据传送,这一个功能可以应用到"字幕",自己做 ...

  10. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...