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
当中,只需要去写关于业务不同的 方法。 代码可维护性大大提高,代码量也会减下来。
angularjs controller 继承的更多相关文章
- 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...
- [ionic开源项目教程] - 第11讲 封装BaseController实现controller继承
关注微信订阅号:TongeBlog,可查看[ionic开源项目]全套教程. 截止到第10讲,tab1[健康]模块的功能基本已经完成了,但这一讲中,controller层又做了较大的改动,因为下一讲中t ...
- Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- 【转】Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
- (十六)JQuery Ready和angularJS controller的运行顺序问题
项目中使用了JQuery和AngularJS框架,近期定位一个问题,原因就是JQuery Ready写在了angularJS controller之前,导致JQuery选择器无法选中须要的元素(由于a ...
- ASP.NET MVC:如何提供 Controller 继承体系使用的 ModelBinder?
背景 Mvc 提供了一种可扩展的模型绑定机制,具体来说就是:将客户端传递的参数按照一定的策略绑定到 action 的参数上,这带来的直接好处就是让 action 的参数支持强类型.一般来说我们有如下方 ...
- AngularJS 'Controller As'用法
AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...
- 夺命雷公狗—angularjs—4—继承和修正继承
angularjs 中也有继承的方法,废话不多说,看代码: <!doctype html> <html lang="en"> <head> &l ...
- Animator Controller 继承关系
准备知识 对于Animator Controller中蜘蛛网一样的几十条连线,后续如果靠人工维护,那成本将是很大. AnimatorOverrideController组件的文档:https://do ...
随机推荐
- 命名规范(数据库,c#)
Ⅰ. Naming Conventions 1. Table Naming Rule 1a ( Prefix) 新加的Table要加上適當的前缀 e.g. mUsr, eTxn, tmpRolle ...
- 模拟CSS3 多组位移运动属性的框架封装
obj是将要运动的对象,json是运动完成时的位移结果. 封装要点: 1.定时器开关flag的定义要放在for in结构的外面,否则,每遍历一次,都会定义一个 新的flag 2.if(current ...
- 使用Git的Push出现rejected - non-fast-forward错误
通过查阅资料,发现是文件冲突问题,即本地和远程的Repository中的文件出现了冲突所致,重新检查了一下,发现是在建立Repository时,添加了ReadMe.txt文件,导致和本地得项目分支不一 ...
- Linux 常识
一.Linux 各目录及每个目录的详细介绍: Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图: /bin 二进制可执行命令 /dev 设备特殊文件 ...
- Android图书应用-西游记
下载App 屏幕截图: 功能介绍:1. 侧边滑动目录导航2. 阅读偏好设置3. 记忆阅读进度 内容介绍: 西游记,中国古典名著,内容分三大部分: 第一部分(一到七回)介绍孙悟空的神通 ...
- JavaFX 教程资料收集
1. JavaFX中文资料 http://www.javafxchina.net/blog/docs/tutorial1/ 2. JavaFX入门教程 http://www.xrpmoon.com/c ...
- 移动端Web适配的两种做法思路总结
看了几篇文章,理一下网易跟淘宝移动端适配的思路,主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流 像素相关概念 物理像素(physical pixel) 一个物理像素是显示器(手机屏 ...
- Myeclipse 不能保存汉字
window-->首选项-->content type-->Text-->Default encoding改为UTF-8,点击update
- uboot
******************************************day:2014/10/14**************************uboot************* ...
- css3媒体查询实现网站响应式布局
最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...