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

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来避免这个问题。

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

赞 (0)

相关推荐

  • AngularJS控制器详解及示例代码

    AngularJS控制器详解及示例代码

    AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope参数指定应用程序/模块,由控制器控制. <div ng-app="" ng-controller="studentController"> ... </div> 在这里,我们已经声明采用ng-controller指令的控制器studentCont

  • 简述AngularJS的控制器的使用

    简述AngularJS的控制器的使用

    AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动.控制器采用ng-controller指令定义.控制器是一个包含属性/属性和JavaScript对象的功能.每个控制器接受$scope参数指定应用程序/模块,由控制器控制. <div ng-app="" ng-controller="studentController"> ... </div> 在这里,我们已经声明采用ng-controller指令的控制器studentCont

  • 详解AngularJS控制器的使用

    控制器在Angularjs中的作用是增强视图,它实际就是一个函数,用来向视图中的作用域添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个控制器时,Angularjs会生成并传递一个$scope给这个控制器,由于Angularjs会自动实例化控制器,所以我们只需要写构造函数即可.下面的例子展示了控制器初始化: function my Controller($scope){ $scope.msg="hello,world!"; } 上面这个创建控

  • AngularJS入门教程之控制器详解

    AngularJS 控制器 AngularJS 控制器 控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的 JavaScript 对象. AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建. AngularJS 实例 <!DOCTYPE html> <html> <head>

  • AngularJS开发教程之控制器之间的通信方法分析

    本文实例讲述了AngularJS开发教程之控制器之间的通信方法.分享给大家供大家参考,具体如下: 一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法是通过scope的继承.假设有两个控制器Parent.Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope.这样,C

  • AngularJS基础学习笔记之控制器

    AngularJS控制器用来控制AngularJS applications的数据. AngularJS控制器就是普通的JavaScript对象. AngularJS控制器 AngularJS applications通过控制器进行控制. ng-controller指令定义了一个application的控制器. 一个控制器就是一个JavaScript对象,它可以通过标准的JavaScript对象构造函数来创建. <div ng-app="myApp" ng-controller=

  • AngularJS控制器之间的通信方式详解

    本文实例讲述了AngularJS控制器之间的通信方式.分享给大家供大家参考,具体如下: 一.利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值:如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型. 基本类型 function San

  • AngularJS控制器controller给模型数据赋初始值的方法

    本文实例讲述了AngularJS控制器controller给模型数据赋初始值的方法.分享给大家供大家参考,具体如下: 之前的文章<AngularJS入门示例之Hello World详解>,很简单的就实现了模型数据和页面显示的自动绑定.现在我们使用控制器,给模型赋初始值.如果使用jQuery来实现变量赋初值,需要在页面加载完成后执行 $("#target").attr("value",selfValue); 使用AngularJS代码如下: <!do

  • AngularJS控制器之间的数据共享及通信详解

    AngularJS 本身已经提供了像指令 Directive 和 服务 Service 一类的方式,来实现数据和代码的共享和复用,但在实际的项目开发中,或许是处于懒惰,亦或是为了便利,总会想在两个控制器之间,直接进行数据的共享通信,或者是函数与方法的调用,这里我们就看看有哪些方法可以满足这个要求. 单例服务 单例服务是 AngularJS 本身支持的数据和代码共享方式,因为是单例的,所有的控制器访问的便是同一份数据.比如,下面的 Service 便可以实现: angular .module('a

  • AngularJS指令与控制器之间的交互功能示例

    本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加

随机推荐