1. AngularJS 控制器：
- AngularJS 控制器控制AngularJS 应用程序的数据。
- ng-controller指令定义了应用程序控制器。
- AngularJS 控制器是常规的JavaScript对象，由标准的JavaScript对象的构造函数创建。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <div ng-app="myApp"><!--AngularJS应用程序由ng-app定义，在这个div内运行--> <div ng-controller="myCtrl"><!--ng-controller="myCtrl"属性是一个指令，用于定义一个控制器--> <input ng-model="carname" /><!--ng-model指令绑定输入域到控制器的属性--> 车名：{{carname}} </div> <p>{{name}}</p> </div> <script> var app = angular.module("myApp", []); app.controller('myCtrl', function($scope, $rootScope){/*myCtrl是一个JavaScript函数*/ $scope.carname = 'Volvo';/*$scope是一个局部的作用域，只作用域定义的控制器内*/ $rootScope.name = 'wgl'/*$rootScope是一个根作用域，作用于ng-app定义的html元素内*/ }) </script> </body> </html>
2. 控制器方法：可以在这个控制器中定义一个方法，然后在控制器定义的局部作用域中使用这个方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行--> 姓名：{{xingMing()}} </div> <script> var app = angular.module("myApp", []); app.controller('myCtrl', function($scope){/*myCtrl是一个JavaScript函数*/ $scope.xing = '王'; $scope.ming = '甘林'; $scope.xingMing = function(){ return $scope.xing+$scope.ming; }; }) </script> </body> </html>
3. 外部文件中的控制器：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义，在这个div内运行--> 姓名：{{xingMing()}} </div> <script type="text/javascript" src="js/xingMing.js"></script> </body> </html>
var app = angular.module("myApp", []); app.controller('myCtrl', function($scope) { /*myCtrl是一个JavaScript函数*/ $scope.xing = '王'; $scope.ming = '甘林'; $scope.xingMing = function() { return $scope.xing + $scope.ming; }; });
4. 总结：从mvc的思想上可以看出，在实际开发中我们主要用到的是外部文件中的控制器这种方法，这样可以是代码分离，使得后期的维护更加方便。