快捷導(dǎo)航

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

更新時(shí)間：2017年02月20日 11:54:00 作者：快樂(lè)八哥

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

1.MVC中的控制器

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

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

2.理解控制器

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

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

3.控制器的作用

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

創(chuàng)建控制器并將它附加到DOM元素之后，AngularJS會(huì)創(chuàng)建一個(gè)子作用域。子作用域保存著對(duì)應(yīng)控制器的數(shù)據(jù)模型。子作用域可以通過(guò)$scope來(lái)獲取。

<!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對(duì)象上，以便在控制器對(duì)應(yīng)的視圖中使用到改方法。也有很多方法是處理業(yè)務(wù)的，也是附加到$scope對(duì)象上。
ng-click對(duì)應(yīng)的事件方法在controller里面定義為addItem，所以在視圖上我們可以使用addItem方法。

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

4.控制器作用域

因?yàn)榭刂破魇歉郊拥紻OM元素上，所以存在著一個(gè)視圖，有多個(gè)控制器?？刂破髦g可以是并列的，也可以是嵌套的形式存在。

4.1 視圖中控制器并列

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

4.2 視圖中控制器嵌套

默認(rèn)情況下，AngularJS在當(dāng)前作用域中無(wú)法找到某個(gè)屬性,就會(huì)在父級(jí)作用域中進(jìn)行查找。即子級(jí)控制器會(huì)繼承父級(jí)控制器中的對(duì)象。但是子級(jí)作用域和父級(jí)作用域中有相同的屬性，子級(jí)使用自己的作用域。這個(gè)時(shí)候子級(jí)作用域要訪問(wèn)父級(jí)作用域的屬性可以通過(guò)$parent。類似JavaScript本身的原型鏈方式。

5.何為ControllerAs

AngularJS提供$scope方式來(lái)處理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提供一種作用域別名的方式，其實(shí)就是將Model直接綁定Controller的實(shí)例上。

代碼如下：

<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個(gè)好處：

1 Controller的定義不再依賴$scope,Controller就是一個(gè)普通的函數(shù)定義，這樣代碼于框架無(wú)關(guān)，假設(shè)哪天不使用AngularJS框架，這里的代碼可以進(jìn)行復(fù)用和移植。

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: