欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Angular企业级开发——MVC之控制器详解

程序员文章站 2022-04-09 22:55:16
1.mvc中的控制器 angularjs的控制器主要为了把模型和视图连接在一起。大多数业务逻辑操作都会放在视图对应的控制器中。当然如果我们能够把业务逻辑放到后端的rest...

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元素节点开始，到节点对应闭合标签结束的地方创建了一个子控制域，单个控制器里面的$scope对象只能访问和调用该控制器范围内的属性和方法。

4.2 视图中控制器嵌套

默认情况下，angularjs在当前作用域中无法找到某个属性,就会在父级作用域中进行查找。即子级控制器会继承父级控制器中的对象。但是子级作用域和父级作用域中有相同的属性，子级使用自己的作用域。这个时候子级作用域要访问父级作用域的属性可以通过$parent。类似javascript本身的原型链方式。

5.何为controlleras

angularjs提供$scope方式来处理controller。代码如下：

<div ng-app="myapp">
 <div ng-controller="maincontroller">
  <p>hello {{ name }}</p>
 </div>
</div>

var app = angular.module('myapp', []);
app.controller('maincontroller', ['$scope',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', []);
app.controller('maincontroller', function() {
 this.name = "world.";
});

使用这种方式处理controller有3个好处：

1 controller的定义不再依赖$scope,controller就是一个普通的函数定义，这样代码于框架无关，假设哪天不使用angularjs框架，这里的代码可以进行复用和移植。

2 测试更友好，不需要开发者去模拟一个$scope

3 增强代码的可读性。在控制器并行和嵌套的demo中，视图上我们都使用花括号包含着name,username等属性。如果有多个控制器并行，或者多个层级的嵌套，我们有时很难区分在视图上使用时哪个控制器下的属性，可以使用controlleras来避免这个问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： Angular.js实现多个checkbox只能选择一个的方法示例

下一篇： IOS项目之弹出动画二

推荐阅读