AngularJS中有ng-controller,通过这样可以给DOM元素装上控制器。
比如这样:
<div ng-controller="firstController">
<p ng-bind="i"></p>
<input type="text" ng-model="abc" value="">
<p ng-bind="abc"></p>
</div>
这样就代表控制器的作用域是整个div,里面的内容受到名为firstController的控制器控制。这段代码中,
<p ng-bind="i"></p>
相当于`i`,但是i这个变量还没定义呢。于是要在控制器中定义:
<script type="text/javascript">
var firstController = function($scope){
$scope.i = 0;
}
</script>
firstController看成一个函数,$scope是其作用域,注意$scope不能改成别的变量名,这是专用的。
<input type="text" ng-model="abc" value="">
其实相当于在 firstController函数中自动加了个变量abc。
上面只是AngularJS 1.2.x 版本的用法,在高版本中,禁止了这种方式,因为这种方式会让controller满天飞,分不清层次,所有东西都挂在$rootScope上。
高版本中的用法为:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="firstController">
<p ng-bind="i"></p>
<input type="text" ng-model="abc" value="">
<p ng-bind="abc"></p>
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
/**
* Module
*
* Description
*/
angular.module('app', []).controller('firstController',
function($scope) {
$scope.i = 0;
});
</script>
</body>
</html>
除了这样,还能在angular.module的第3个参数里面注册控制器,也就相当于定义了。angular.module的第3个参数是configFn,意思是module的配置函数,可以在里面配置controller。
注册controller用到了$controllerProvider.register();方法。
代码说明:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div ng-controller="Controller1">
`something`
</div>
<script src="http://cdn.bootcss.com/angular.js/1.4.0-rc.2/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', [], function($controllerProvider) {
$controllerProvider.register('Controller1', function($scope) {
$scope.something = 'this is a sample';
});
});
</script>
</body>
</html>
但是,要注意正确的使用controller。
controller不应该尝试做太多事情,它应该仅仅包含单个视图所需要的业务逻辑。
保持controller的简单性,抽出那些不属于controller的工作到service或者factory中,比如数据获取和共享。具体看AngularJS中的provider,factory,service方法。
不要在controller中做任何类型的DOM操作。controller应该仅仅包含业务逻辑,任何表现逻辑放在controller中都将大大影响应用逻辑的可测试性。如果希望执行自定义的DOM操作,可以把表现逻辑抽取到directive中。不要用controller格式化输入与输出。
不要用controller实例化或者管理其它组件的生命周期,在module里完成这些事情。
转载于:https://blog.51cto.com/iampomelo/1658455