Angular企业级开发(7)-MVC之控制器

时间 2019-11-26

原文原文链接

1.MVC中的控制器

AngularJS的控制器主要为了把模型和视图链接在一块儿。大多数业务逻辑操做都会放在视图对应的控制器中。固然若是咱们可以把业务逻辑放到后端的REST服务中，就能够开发轻量级AngularJS应用。javascript

涉及到多个控制器中使用的业务逻辑，须要放到一个公共的服务中，而后把改服务注入使用到该业务逻辑的控制器中。html

2.理解控制器

在AngularJS的控制器中，构造函数会有$scope参数。当一个控制器经过ng-controller指令链接到DOM上，Angular将实例化一个新的控制器对象，而后调用指定的控制器的构造函数。一个新的子做用范围(scope)将被建立，并做为一种可注入的参数传递给控制器的构造函数为$scope。java

若是控制器使用controller as语法附加到DOM上，那么控制器实例将被分配给新的$scope范围。而且多了一个和as同名的属性，而后把本身指向这个属性，就方便咱们访问了。angularjs

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方法。mvc

视图上的ng-click、ng-model和ng-repeat都是AngularJS的内置指令，后续博客会详细介绍。app

AngularJS Controller Demo框架

4.控制器做用域

由于控制器是附加到DOM元素上，因此存在着一个视图，有多个控制器。控制器之间能够是并列的，也能够是嵌套的形式存在。ide

4.1 视图中控制器并列

各个控制器从附加DOM元素节点开始，到节点对应闭合标签结束的地方建立了一个子控制域，单个控制器里面的$scope对象只能访问和调用该控制器范围内的属性和方法。
控制器并列Demo函数

4.2 视图中控制器嵌套

默认状况下，AngularJS在当前做用域中没法找到某个属性,就会在父级做用域中进行查找。即子级控制器会继承父级控制器中的对象。可是子级做用域和父级做用域中有相同的属性，子级使用本身的做用域。这个时候子级做用域要访问父级做用域的属性能够经过$parent。相似JavaScript自己的原型链方式。

控制器嵌套Demo

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