云游戏平台下载

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 1089字
更新時間： 2020-11-28 23:44:30

3.2 AngularJS中的MVC

MVC是一種軟件設計思想，并不是一門具體的技術，AngularJS框架中也引入了這種思想，下面就來看一下AngularJS中的MVC分別指的是什么。

● Model（模型）：前面章節中提到過的作用域對象（例如$rootScope對象）中的屬性。

● View（視圖）：大家所熟悉的DOM元素，從用戶的角度來看就是HTML頁面，在View中可以通過AngularJS表達式訪問模型數據。

● Controller（控制器）：用戶自定義的構造方法，作用域中的模型數據可以通過依賴注入的方式注入控制器中。

注意

目前普遍認為AngularJS是一款MVW（Model-View-Whatever）框架，這是因為早期的AngularJS框架比較接近于MVC，而隨著新版本代碼的重構與API的改進，$scope對象可以認為是由一個方法（Controller）包裝后的ViewModel，看上去更接近于MVVM（Model-View-ViewModel）框架，那么到底是MVC還是MVVM呢？不管怎樣都行（Whatever），這就是MVW框架的由來。

3.2.1 AngularJS控制器的定義

AngularJS控制器是一個構造方法。有些JavaScript編程經驗的朋友都知道，JavaScript方法可以作為對象模板實例化對象，當方法作為對象模板時，方法本身即為對象的構造方法。所以我們可以像定義一個普通方法一樣定義一個控制器，例如：

        <script type="text/javascript">
            function LoginController（$scope, $log）{

            $scope.name="admin";
                $scope.pword="123456";
            }
        </script>

除此之外，我們還可以使用模塊實例的controller()方法來聲明一個控制器。該方法可接收兩個參數，第一個參數為控制器名稱，第二個參數為一個匿名方法，即控制器的構造方法，具體使用方法如下：

        <script type="text/javascript">
            var app =  angular.module（"app", []）;
            app.controller（"LoginController", function（$scope, $log）{

            $scope.name="admin";

            $scope.pword="123456";
            }）;
        </script>

如上面的代碼所示，AngularJS框架在window對象中增加了一個全局的angular對象，我們可以調用angular對象的module()方法返回一個模塊實例，然后調用模塊實例的controller()方法來聲明一個控制器。這種方式最為常用，將會在后面的模塊化章節中重點介紹。

在上面的案例代碼中，我們定義控制器時指定了兩個參數，即$scope和$log:$scope是作用域對象，是控制器與視圖之間傳遞信息的載體；$log為AngularJS框架內置的日志服務對象，用于向控制臺中輸入日志信息。當我們為控制器構造方法指定這兩個參數后，表示控制器依賴于這兩個對象，控制器實例化時會把這兩個對象注入控制器中。

注意

AngularJS 1.3版本之后已不再支持全局控制器，第一種控制器定義方式只適用于AngularJS 1.3之前的版本。

3.2.2 控制器對象的實例化

控制器對象的實例化非常簡單，需要用到AngularJS內置的ng-controller指令。ng-controller的使用方法和ng-app指令類似，也是作為標簽的擴展屬性使用，具體如下：

        <div ng-controller="LoginController">
        </div>

AngularJS框架遇到ng-controller指令時會根據ng-controller指令指定的控制器名稱查找控制器構造方法，然后使用對應的構造方法實例化控制器對象，并將控制器依賴的對象注入控制器對象中。

除此之外，ng-controller指令還支持使用as語法指定控制器對象名稱，例如：

        <body ng-controller="CalcController as calc">
            <div>單價：<input type="number" ng-model="price" /></div><br/>
            <div>數量：<input type="number" ng-model="num" /></div><br/>
            <div>總價：{{calc.totalPrice()}}</div>
            <script type="text/javascript">
                function CalcController（$scope）{
                    $scope.price = 10;
                    $scope.num = 1;
                    this.totalPrice = function() {
                        return $scope.price * $scope.num;
                    }
                }
                var app = angular.module（"app", []）;
                app.controller（"CalcController", CalcController）;
            </script>
        </body>

如上面的代碼所示，我們可以使用as語法指定控制器對象的名稱為calc。這樣做的好處是，可以通過控制器對象名稱訪問控制器對象的成員屬性及成員方法。

官术网_书友最值得收藏!

AngularJS入門與進階

3.2 AngularJS中的MVC

3.2.1 AngularJS控制器的定義

3.2.2 控制器對象的實例化