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 0006:控制器

  • 2016-12-16 10:55
  • 156KB
  • 下载

AngularJS 控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。  AngularJS 控制器是常规的 JavaScript 对象。 AngularJS 控制器 Angul...

angularJS概念理解三:控制器

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

AngularJS进阶(九)控制器controller之间如何通信

AngularJS控制器controller之间如何通信 angular控制器通信的方式有三种:  1,利用作用域继承的方式。即子控制器继承父控制器中的内容  2,基于事件的方式。即$on,$emit...

AngularJS第三课(控制器(续),过滤器,服务)

控制器实例: 姓: 名: 姓名:{{firstName+lastName}} var

AngularJS权威教程 第5章 控制器controller

AngularJS权威教程 第5章 控制器controller     控制器在AngularJS中的作用是增强视图。在Hello World的例子中,我们并没有使用普通的控制器,而是使用了一个隐式...

AngularJS第二课(指令,作用域,控制器)

指令实列: name: 您输入的是:{{firstName}} ng-init:作用是初始化数据 ng-model:将把输入域(也就是input)的值,绑定到应用程序(也就是{{fi...

angularJS学习之路(三)---控制器

AngularJS 控制器 控制 AngularJS 应用程序的数据。 AngularJS 应用程序被控制器控制。 ng-controller 指令定义了应用程序控制器。 控制器是 Java...

AngularJS 精妙绝伦的控制器

AngularJS 精妙绝伦的控制器 学习要点: 为什么使用控制器基本原理  创建使用控制器作用域 组织控制器  单块控制器复用控制器控制器继承多控制器 无作用域控制器...

angularJS的控制器

angularJS控制器。因为ng-app是控制整个应用的,一般一个应用中只有一个ng-app。而一个应用中有好多个界面,这样就需要按照页面的需要划分作用域,每一个页面划分一个作用域,就是用contr...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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