AngularJS的控制器主要爲了把模型和視圖鏈接在一塊兒。大多數業務邏輯操做都會放在視圖對應的控制器中。固然若是咱們可以把業務邏輯放到後端的REST服務中,就能夠開發輕量級AngularJS應用。javascript
涉及到多個控制器中使用的業務邏輯,須要放到一個公共的服務中,而後把改服務注入使用到該業務邏輯的控制器中。html
在AngularJS的控制器中,構造函數會有$scope
參數。當一個控制器經過ng-controller
指令鏈接到DOM上,Angular將實例化一個新的控制器對象,而後調用指定的控制器的構造函數。一個新的子做用範圍(scope
)將被建立,並做爲一種可注入的參數傳遞給控制器的構造函數爲$scope
。java
若是控制器使用controller as
語法附加到DOM上,那麼控制器實例將被分配給新的$scope
範圍。而且多了一個和as同名的屬性,而後把本身指向這個屬性,就方便咱們訪問了。angularjs
建立控制器並將它附加到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; }]); })();
附加行爲的方式是把方法或事件添加到$scope
對象上,以便在控制器對應的視圖中使用到改方法。也有不少方法是處理業務的,也是附加到$scope
對象上。
ng-click
對應的事件方法在controller裏面定義爲addItem
,因此在視圖上咱們能夠使用addItem
方法。mvc
視圖上的ng-click
、ng-model
和ng-repeat
都是AngularJS的內置指令,後續博客會詳細介紹。app
由於控制器是附加到DOM元素上,因此存在着一個視圖,有多個控制器。控制器之間能夠是並列的,也能夠是嵌套的形式存在。ide
各個控制器從附加DOM元素節點開始,到節點對應閉合標籤結束的地方建立了一個子控制域,單個控制器裏面的$scope
對象只能訪問和調用該控制器範圍內的屬性和方法。
控制器並列Demo函數
默認狀況下,AngularJS在當前做用域中沒法找到某個屬性,就會在父級做用域中進行查找。即子級控制器會繼承父級控制器中的對象。可是子級做用域和父級做用域中有相同的屬性,子級使用本身的做用域。這個時候子級做用域要訪問父級做用域的屬性能夠經過$parent
。相似JavaScript自己的原型鏈方式。
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
來避免這個問題。