AngularJs（四）控制器

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);};});