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 ...
随机推荐
- pythony语法小练习
i=[0,1] b=[2,3] print(dict([i,b]))#列表转换为字典 题目:有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析:可填在百位.十位 ...
- Node.js之NPM工具使用
1.NPM介绍:包管理工具 (1)允许用户从NPM服务器下载别人编写的第三方包到本地石使用 (2)允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用 (3)允许用户将自己编写的包或命令行程 ...
- PHP 显示文章发布日期 一小时前 一天前 一月前 一年前
<?PHP /*** 传入日期格式或时间戳格式时间,返回与当前时间的差距,如1分钟前,2小时前,5月前,3年前等* @param string or int $date 分两种日期格式" ...
- 使用echarts开发电子屏数据展示页面
背景 之前的项目因为要顾及体量问题,选用了highchart,没用上echarts:这次因为是本地部署电子屏幕的展示页,不需要考虑体量大小,直接用上了echarts:用起来觉得非常不错,特别是地图上非 ...
- Linux 用户添加sudo 权限
编辑/etc/sudoers 搜索root 添加 账号 ALL=(ALL) ALL
- ue4 c++学习推荐
我由易到难推荐,不过在此之前还是先看看官方对于VS设置的推荐: https://docs.unrealengine.com/latest/INT/Programming/Development/Vis ...
- 『AngularJS』$location 服务
项目中关于 $location的用法 简介 $location服务解析在浏览器地址栏中的URL(基于window.location)并且让URL在你的应用中可用.改变在地址栏中的URL会作用到$loc ...
- oracle plsql 无法连接 报 ORA-12560: TNS:protocol adapter error
ORA-12560: TNS:protocol adapter error 添加一个环境变量,名为TNS_ADMIN,值为 tnsnames.ora 文件所在路径.比如我的本机为:D:/instant ...
- HTML5 WebSocket
在WebSocket API中,浏览器和服务器只需要做一个握手动作,然后,浏览器和服务器之间就形成一条快速通道,两者之间就可以直接进行数据传送,这一个功能可以应用到"字幕",自己做 ...
- 纯css来实现提示框
用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...