1.MVC中的控制器
AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级AngularJS应用。
涉及到多个控制器中使用的业务逻辑,需要放到一个公共的服务中,然后把改服务注入使用到该业务逻辑的控制器中。
2.理解控制器
在AngularJS的控制器中,构造函数会有$scope
参数。当一个控制器通过ng-controller
指令连接到DOM上,Angular将实例化一个新的控制器对象,然后调用指定的控制器的构造函数。一个新的子作用范围(scope
)将被创建,并作为一种可注入的参数传递给控制器的构造函数为$scope
。
如果控制器使用controller as
语法附加到DOM上,那么控制器实例将被分配给新的$scope范围。并且多了一个和as同名的属性,然后把自己指向这个属性,就方便我们访问了。
3.控制器的作用
3.1 在控制器中初始化模型(添加属性)
创建控制器并将它附加到DOM元素之后,AngularJS会创建一个子作用域。子作用域保存着对应控制器的数据模型。子作用域可以通过$scope
来获取。
<!DOCTYPE html><html lang="en" ng-app="myApp"><head> <meta charset="UTF-8"> <title>AngularJS Controller Demo</title> <script type="text/javascript" src="angular.min.js"> </script> <script src="app.js" charset="utf-8"></script></head><body ng-controller="MainController"> <p>{{username}}</p> <p>{{age}}</p></body></html>
(function () { 'use strict'; angular.module("myApp", []) .controller('MainController', ['$scope', function ($scope) { $scope.username="leeli"; $scope.age=28; }]);})();
3.2 在控制器中附件行为(添加事件或方法)
附加行为的方式是把方法或事件添加到$scope
对象上,以便在控制器对应的视图中使用到改方法。也有很多方法是处理业务的,也是附加到$scope
对象上。ng-click
对应的事件方法在controller里面定义为addItem
,所以在视图上我们可以使用addItem
方法。
视图上的ng-click
、ng-model
和ng-repeat
都是AngularJS的内置指令,后续博客会详细介绍。
4.控制器作用域
因为控制器是附加到DOM元素上,所以存在着一个视图,有多个控制器。控制器之间可以是并列的,也可以是嵌套的形式存在。
4.1 视图中控制器并列
各个控制器从附加DOM元素节点开始,到节点对应闭合标签结束的地方创建了一个子控制域,单个控制器里面的
新闻热点
疑难解答
图片精选