引言AngularJS之控制器1 ng-init指令創建變量11 代碼實現12 運行結果13 代碼解釋2 通過控制器賦值變量21 代碼實現22 代碼解釋3 控制器產生作用域31 代碼實現32 代碼解釋
在起初我們就說過AngularJS基于MVC的實現，在開發過程中我們是將controller和view分離的，在此篇博客中我們就來看看如果在AngularJS中實現控制器。
AngularJS之控制器ng-init指令創建變量 在說控制器之前我們先看看，如果沒有控制器，我們應該如何賦值我們的變量呢？在第一篇博客中我們說了一個指令叫做ng-init，通過該指令我們可以創建我們的變量。
a然后我們通過表達式輸出test的變量 在上面的例子中存在明顯的缺陷，缺陷就是html是我們的view，應該僅僅負責頁面的顯示，不應該參與過多的控制代碼：例如創建變量等等，創建變量應該存在我們的控制器中,在AngularJS中使用ng-controller指令創建我們的控制器，在AngularJS中控制器的實現是一個function對象，接下來我們就來看一下如何實現控制器。
AngularJS函數庫（省略）指定我們的AangularJS作用域（注意我們的ng-app指定為myApp）<html ng-app="myApp"> <head> </head> <body> </body></html>使用ng-controller指令指定我們控制器（注意我們的控制器名稱為：firstController）<div ng-controller="firstController"> {{test}}</div>然后我們使用代碼定義我們的變量test <script> var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.test="第一個控制器"; }) </script>運行結果
angular.module("myApp",[])方法有兩個參數，第一個參數是模塊的名稱，對應著ng-app指令對應的值，第二個參數是模塊的依賴，此處為空，這個參數在使用插件的時候會指定，在模塊化編程當中也會使用。var app=angular.module("myApp",[])的返回值為當前模塊，我們賦值為變量appapp.controller()方法有兩個參數，第一個參數是控制器的名稱，對應著ng-controller指令，每一個ng-controller指令都應有著function對象關注控制器的第二個參數對象function，函數對象有一個$scope參數，這個參數不能修改，必須寫成$scope，我們通過給$scope對象添加了一個test參數，相當于在controller作用域中添加了一個test對象$scope對象其實是一個服務，也就是service，關于service的介紹我們將在以后說。 在這里我們看一下AngularJS中控制器產生的作用域，話不多少，看一下下面的代碼實例。
html標簽<body ng-init="test='ng-init'"> <div ng-controller="firstController"> {{test}} <div ng-controller="thirdController"> {{test}} </div> <div ng-controller="forthController"> {{test}} </div> </div> <div ng-controller="secondController"> {{test}} </div></body>我們的控制器代碼 var app=angular.module("myApp",[]) app.controller("firstController",function($scope){ $scope.test="firstController"; }) app.controller("thirdController",function($scope){ $scope.test="thirdController"; }) app.controller("secondController",function($scope){ }) app.controller("forthController",function($scope){ })運行結果
我們首先看一下html標簽的結構
forthController輸出test變量，因為forthController沒有test變量，所以向上查找，找到firstController控制器，所以輸出firstController我們在secondController輸出test變量，因為secondController沒有test變量，所以向上查找，找到body標簽，body標簽定義了test變量，所以輸出ng-init。我們的控制器會形成一個樹狀圖，我們通過樹狀圖查找變量，直到查找到為止，如果最終什么都沒查找到那么就什么也不會輸出。最重要的一條，在AngularJS中，我們的變量的作用域是基于控制器的，一般在寫html頁面的時候，我們定義我們的控制器，在控制器中定義我們的變量，然后輸出。新聞熱點
疑難解答
