AngularJS (4) ng-controller 宣告
以下完整程式碼：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 保哥的技術交流中心)
留言
張貼留言