Angular企业级开发(7)-MVC之控制器
1.MVC中的控制器AngularJS的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的REST服务中,就可以开发轻量级AngularJS应用。 涉及到多个控制器中使用的业务逻辑,需要放到一个公共的服务中,然后把改服务注入使用到该业务逻辑的控制器中。 2.理解控制器在AngularJS的控制器中,构造函数会有 如果控制器使用 3.控制器的作用3.1 在控制器中初始化模型(添加属性)创建控制器并将它附加到DOM元素之后,AngularJS会创建一个子作用域。子作用域保存着对应控制器的数据模型。子作用域可以通过 <!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 在控制器中附件行为(添加事件或方法)附加行为的方式是把方法或事件添加到 视图上的 AngularJS Controller Demo 4.控制器作用域因为控制器是附加到DOM元素上,所以存在着一个视图,有多个控制器。控制器之间可以是并列的,也可以是嵌套的形式存在。 4.1 视图中控制器并列各个控制器从附加DOM元素节点开始,到节点对应闭合标签结束的地方创建了一个子控制域,单个控制器里面的 4.2 视图中控制器嵌套默认情况下,AngularJS在当前作用域中无法找到某个属性,就会在父级作用域中进行查找。即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性,子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过 控制器嵌套Demo 5.何为ControllerAsAngularJS提供 <div ng-app="myApp"> <div ng-controller="MainController"> <p>Hello {{ name }}</p> </div> </div> var app = angular.module('myApp', []); app.controller('MainController',function($scope) { $scope.name = "world."; }]); AngularJS处理Controller提供一种作用域别名的方式,其实就是将Model直接绑定Controller的实例上。 <div ng-app="myApp"> <div ng-controller="MainController as mainCtrl"> <p>Hello {{ name }}</p> </div> </div> var app = angular.module('myApp', function() { this.name = "world."; }); 使用这种方式处理Controller有3个好处: 1 Controller的定义不再依赖$scope,Controller就是一个普通的函数定义,这样代码于框架无关,假设哪天不使用AngularJS框架,这里的代码可以进行复用和移植。 2 测试更友好,不需要开发者去模拟一个 3 增强代码的可读性。在控制器并行和嵌套的demo中,视图上我们都使用花括号包含着name,userName等属性。如果有多个控制器并行,或者多个层级的嵌套,我们有时很难区分在视图上使用时哪个控制器下的属性,可以使用 6.参考内容
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |