AngularJS 介紹 - Controller

AngularJS 可以讓開發者基於 MVC 模式設計網頁，而在 MVC 模式中負責連接 model 跟 view 的角色就是 controller。

在 AngularJS 中，我們必需在 module 中註冊 controller 的名稱跟其建構式，才能在 view 上存取/呼叫 controller 提供的相關屬性與方法。

註冊 controller 的方法為

module.controller(name, constructor);

  • name 為 controller 的名稱，也就是在 ng-controller 指定的名稱。
  • constructor 為 controller 的建構函式。

一個註冊 controller 的簡單範例如下：

JavaScript
1
2
3
4
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
  $scope.name = 'Chris';
}]);
HTML
1
2
3
<body ng-controller="myCtrl">
  <h1>Hi {{ name }}</h1>
</body>

在 $scope 上定義的任何屬性或方法，都可以在 view（也就是 HTML）透過 controller 取得。
若 controller 有其他需要注入（inject）的物件，則可以 constructor 的陣列依序填上，如下：

1
2
3
4
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', '$q', function($scope, $q) {
  $scope.name = 'Chris';
}]);

controller 還有另一種定義的方式：

1
2
3
app.controller('myCtrl', function() {
  this.name = 'Chris';
});

而這樣定義 controller，在 HTML上 的寫法會略有不同。

1
2
3
<body ng-controller="myCtrl as ctrl">
  <h1>Hi {{ ctrl.name }}</h1>
</body>