Angular企業(yè)級開發(fā)——MVC之控制器詳解

更新時間：2017年02月20日 11:54:00 作者：快樂八哥

本篇文章主要介紹了Angular企業(yè)級開發(fā)——MVC之控制器詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.MVC中的控制器

AngularJS的控制器主要為了把模型和視圖連接在一起。大多數(shù)業(yè)務邏輯操作都會放在視圖對應的控制器中。當然如果我們能夠把業(yè)務邏輯放到后端的REST服務中，就可以開發(fā)輕量級AngularJS應用。

涉及到多個控制器中使用的業(yè)務邏輯，需要放到一個公共的服務中，然后把改服務注入使用到該業(yè)務邏輯的控制器中。

2.理解控制器

在AngularJS的控制器中，構(gòu)造函數(shù)會有$scope參數(shù)。當一個控制器通過ng-controller指令連接到DOM上，Angular將實例化一個新的控制器對象，然后調(diào)用指定的控制器的構(gòu)造函數(shù)。一個新的子作用范圍(scope)將被創(chuàng)建，并作為一種可注入的參數(shù)傳遞給控制器的構(gòu)造函數(shù)為$scope。

如果控制器使用controller as語法附加到DOM上，那么控制器實例將被分配給新的$scope范圍。并且多了一個和as同名的屬性，然后把自己指向這個屬性，就方便我們訪問了。

3.控制器的作用

3.1 在控制器中初始化模型(添加屬性)

創(chuàng)建控制器并將它附加到DOM元素之后，AngularJS會創(chuàng)建一個子作用域。子作用域保存著對應控制器的數(shù)據(jù)模型。子作用域可以通過$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對象上，以便在控制器對應的視圖中使用到改方法。也有很多方法是處理業(yè)務的，也是附加到$scope對象上。
ng-click對應的事件方法在controller里面定義為addItem，所以在視圖上我們可以使用addItem方法。

視圖上的ng-click、ng-model和ng-repeat都是AngularJS的內(nèi)置指令，后續(xù)博客會詳細介紹。

4.控制器作用域

因為控制器是附加到DOM元素上，所以存在著一個視圖，有多個控制器?？刂破髦g可以是并列的，也可以是嵌套的形式存在。

4.1 視圖中控制器并列

各個控制器從附加DOM元素節(jié)點開始，到節(jié)點對應閉合標簽結(jié)束的地方創(chuàng)建了一個子控制域，單個控制器里面的$scope對象只能訪問和調(diào)用該控制器范圍內(nèi)的屬性和方法。

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就是一個普通的函數(shù)定義，這樣代碼于框架無關(guān)，假設(shè)哪天不使用AngularJS框架，這里的代碼可以進行復用和移植。

2 測試更友好，不需要開發(fā)者去模擬一個$scope

3 增強代碼的可讀性。在控制器并行和嵌套的demo中，視圖上我們都使用花括號包含著name,userName等屬性。如果有多個控制器并行，或者多個層級的嵌套，我們有時很難區(qū)分在視圖上使用時哪個控制器下的屬性，可以使用ControllerAs來避免這個問題。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: