Angular企業級開發(7)-MVC之控制器

1.MVC中的控制器

AngularJS的控制器主要爲了把模型和視圖鏈接在一塊兒。大多數業務邏輯操做都會放在視圖對應的控制器中。固然若是咱們可以把業務邏輯放到後端的REST服務中,就能夠開發輕量級AngularJS應用。javascript

涉及到多個控制器中使用的業務邏輯,須要放到一個公共的服務中,而後把改服務注入使用到該業務邏輯的控制器中。html

2.理解控制器

在AngularJS的控制器中,構造函數會有$scope參數。當一個控制器經過ng-controller指令鏈接到DOM上,Angular將實例化一個新的控制器對象,而後調用指定的控制器的構造函數。一個新的子做用範圍(scope)將被建立,並做爲一種可注入的參數傳遞給控制器​​的構造函數爲$scopejava

若是控制器使用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-clickng-modelng-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來避免這個問題。

6.參考內容

  1. Controller官方介紹

  2. angularjs 嵌套控制器,子控制器訪問父控制器

  3. angular controller as syntax vs scope

  4. 用$scope仍是用controller as

相關文章
相關標籤/搜索