AngularJS (4) ng-controller 宣告

作者： Tshuà Bûn-lī (蔡文莉) - 7月 28, 2014

以下完整程式碼：Plunker Demo

先由ng-app劃出了整個網頁內angularJS的運作範圍，再由ng-controller決定要執行的事件。

ng-controller在AngularJS (1) 宣告ng-app、AngularJS 用$filter(2)已經出現幾次，多是用來存放在HTML顯示的變數數值、或是對變數的處理。所以啦，先了解控制器的宣告方式，之後就可以隨你需要去寫控制器的內容嚕。

簡單的例子總是比較好入手，我們希望能印出歡迎字樣：

"Hello! I'm Lily."

<body>

<body ng-app="app1">
    <div ng-controller="HelloController">
      {{ greet }}
    </div>
</body>

寫好了body，接下來就來看看ng-controller的宣告方式

ng-controller 直接宣告

<head>
    <script>
        var app1 = angular.module("app1",[]);
        function HelloController($scope){
          $scope.greet = "Hello! I'm Lily.";
        }
    </script>
</head>

$scope引數為HelloController的物件指標，$scope.greet也就是HelloController的物件的內部變數。

HelloController被宣告為全域的控制器。網頁內若有多個app都可以呼叫它。可以更直接的，宣告<body ng-app>表明angularJS的有效範圍包含整個<body>即可，不需要指定<body ng-app="app1">也不用在<script>宣告app1。

<head>
    <script>
        function HelloController($scope){
          $scope.greet = "Hello! I'm Lily.";
        }
    </script>
</head>

<body ng-app>
    <div ng-controller="HelloController">...
</body>

ng-controller 一般宣告

<head>
    <script>
        var app1 = angular.module("app1",[]);
        app1.controller("HelloController", function($scope){
             $scope.greet = "Hello! I'm Lily.";
        });
    </script>
</head>

HelloController被宣告為app1的內部控制器，只有在app1內才能使用它。這種寫法的好處是，當你有多個app時，每個控制器都被明確定義隸屬於哪個app，不容易搞混。

ng-controller 相依注入宣告 (Dependency Injection)

<head>
    <script>
       var app1 = angular.module("app1",[]);
       app1.controller("HelloController",['$scope', function($scope)
          {
            $scope.greet = "Hello! I'm Lily.";
          }
       ]);
    </script>
</head>

'$scope'是angularJS服務的其中一種，用來產生控制器的$scope。
[ '$scope', function($scope)...] 的前面宣告了注入到HelloController的angularJS服務，最後一個是定義HelloController本身。

遇上Javascript最小化

直接宣告和一般宣告不適用於Javascript最小化，因為angularJS認不得被縮短字串後的$scope。
相依注入宣告則適用於javascript最小化，function($scope)可以改寫成function(a)。
(引用自 Will 保哥的技術交流中心)

搜尋此網誌

Ti-Tiâu