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——controller控制器的作用

一、什么是controller 在angularJS中,controlle是一个javascript函数/类,用于操作作用域中,各个对象的初始状态以及相应的行为 二、controller的...

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

一、AngularJS动态加载控制器和视图实例 1.引用: 2.HTML 首页 关于页面 ...

AngularJS ocLazyLoad按需加载控制器/js文件的延迟加载(一)

一、ocLazyLoad说明 1.ocLazyLoad是AngularJS的第三方库,可以实现模块、控制器及其他依赖的动态加载/按需加载 2.$ocLazyLoad.load()支持多个文件,可以自定...

AngularJS 精妙绝伦的控制器

学习要点: 为什么使用控制器 创建使用控制器已经修改作用域 单块控制器 复用控制器 控制器继承 多控制器 无作用域控制器 显...

angularjs指令详细分析&&与控制器数据交互

简介(转)指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的。指令是我们用来扩展浏览器...

AngularJs学习笔记(三)控制器和过滤器

AngularJs学习笔记之控制器和过滤器

angularJS--多个控制器之间的数据共享

为了在控制器之间共享数据,需要在服务中添加一个用来储存用户名的方法。记住,服务在 应用的生命周期内是单例模式的,因此可以将用户名安全地储存在其中。 DOCTYPE html> html> ...

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

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

angularjs的使用:模块,服务,控制器(2)

1. *模块 1.1 在AngularJS中,模块是定义应用的最主要方式。模块包含了主要的应用代码。一个应用可以包含多个模块,每一个模块都包含了定义具体功能的代码。 1.2 定义模块: var myM...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJs(四)控制器
举报原因:
原因补充:

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