AngularJs(四)控制器

原创 2016年05月30日 16:14:04

AngularJS中的控制器是一个函数,用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态,并添加自定义行为。

之前的章节中说到,控制器并不适合用来执行DOM操作、格式化或数据操作,以及除存储数据模型之外的状态维护操作。那么到底应该怎么去使用它?

控制器应该尽可能保持短小精悍,而在控制器中进行DOM操作和数据操作则是一个不好的

实践。

例如,下面这个例子中的控制器包含了过于臃肿的逻辑用于控制视图,并且还操作了DOM。

臃肿的控制器:

angular.module('myApp', [ ])
.controller('MyController', function($scope) {
$scope.shouldShowLogin = true;
$scope.showLogin = function () {
$scope.shouldShowLogin =!$scope.shouldShowLogin;
};
$scope.clickButton = function() {
$('#btn span').html('Clicked');
};
$scope.onLogin = function(user) {
$http({
method: 'POST',
url: '/login',
data: {
user: user
}
}).success(function(data) {
// user
});
};
});


设计良好的应用会将复杂的逻辑放到指令和服务中。通过使用指令和服务,我们可以将控制器重构成一个轻量且更易维护的形式:

简洁的控制器:

angular.module('myApp',[ ])
.controller('MyController',function($scope,UserSrv) {
// 内容可以被指令控制
$scope.onLogin = function(user) {
UserSrv.runLogin(user);
};
});


AngularJS-控制器篇(controller)

今天公司突然停电了,临时回家,哈哈 莫名很兴奋。                                                                 回家里已经把工作...
  • sinat_38529191
  • sinat_38529191
  • 2017年04月28日 15:50
  • 931

深究AngularJS——AngularJS中的Controller(控制器)

先看个示例 第一个数字: 第二个数字:
  • zcl_love_wx
  • zcl_love_wx
  • 2017年02月15日 14:09
  • 1142

AngularJS(四)——ng-controller(控制器)

前言     上篇大概说了一下指令的应用格式以及创建自定义指令方法,本篇重点介绍一些ng-controller都有哪些小作用。 内容     通过修改控制器部分,修改显示界面。 Demo  ...
  • zlt995768025
  • zlt995768025
  • 2016年10月14日 09:20
  • 470

AngularJS中控制器之间通信方法

如何在作用域之间通信呢?     1.创建一个单例服务,然后通过这个服务处理所有子作用域的通信。     2.通过作用域中的事件处理通信。但是这种方法有一些限制;例如,你并不能广泛的将事件传播到所...
  • helloxiaoliang
  • helloxiaoliang
  • 2017年03月06日 15:54
  • 658

AngularJS控制器controller通信方法

1,利用作用域继承的方式。即子控制器继承父控制器中的内容 2,基于事件的方式。即$on,$emit,$boardcast这三种方式 3,服务方式。写一个服务的单例然后通过注入来使用 ...
  • baidu_31333625
  • baidu_31333625
  • 2016年10月08日 16:49
  • 1086

angularJS概念理解三:控制器

在AngularJS中,实现数据绑定的核心是scope对象。 控制器让我们有机会在scope上定义我们的业务逻辑,具体说,可以使用控制器: 对scope对象进行初始化向scope对象添加方法 ...
  • ll_xiaohanqing_91
  • ll_xiaohanqing_91
  • 2016年06月20日 17:10
  • 815

angularjs中的MVC:路由、控制器继承

参考:《angularjs实战》model显式与隐式model的定义 {{name}}
  • sinat_31057219
  • sinat_31057219
  • 2017年02月21日 17:31
  • 953

AngularJS控制器嵌套(作用域包含作用域)

AngularJS应用的任何一个部分,无论它渲染在哪个上下文中,都有父级作用域存在。对于 ng-app所处的层级来讲,它的父级作用域就是$rootScope。有一个例外:在指令内部创建的作用域被称作...
  • qq_29678299
  • qq_29678299
  • 2016年04月10日 00:12
  • 4507

AngularJS 动态加载控制器实例-ocLoazLazy(二)

一、AngularJS动态加载控制器和视图实例 1.引用: 2.HTML 首页 关于页面 ...
  • u011127019
  • u011127019
  • 2016年12月13日 11:38
  • 2387

angularJs在控制器中使用过滤器实例

{{data}} 在控制器中使用过滤器 var m = angular.module('module', []); /*在控制器中注入$filter的服务*/ ...
  • u012396955
  • u012396955
  • 2017年05月31日 16:48
  • 1234
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJs(四)控制器
举报原因:
原因补充:

(最多只允许输入30个字)