Angular controller 那我的第一個 AngularJS controller 呢?

為何我跟別人 AngularJS 的教材特別不一樣, 反而先教 directives 後教 controllers 呢? 沒什麼原因, 只是我覺得 directives 是 Angular 比較容易上手, 而且常用的東西, 既使不太會寫 AngularJS code, 會用 Angular directives (別人提供的模組) 對寫 front-end 來說來的更重要.
但從模組的內容來看, 它們每一個各有其功能.

controller 其實本身很簡單, 只是幫這個控制器的範圍內, 提供一個屬於它專屬的 global 變數, 它叫做 $scope. 所以在這個 scope (範圍) 裡, 它肚子裡的所有變數或 functions. 大家都可以共享, access 的到. 它可以有兩種寫法.

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = '你好!';
}]);

或

myApp.controller('GreetingController', function($scope) {
  $scope.greeting = '你好!';
});


雖然文法上, 第二種寫法比較看的懂, 但還是建議您用第一種寫法.

哪 Angular directive 的程式來改:

http://codepen.io/mingderwang/pen/tdKfB

1. 在 Javascript 的地方, 加入 controller 的 code 如下

原本 'myApp' module (模組) 只有 .directive 的定義, 現在在插入 .controller 的定義.

.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = '你好!';
}])

也繼續沿用 cascading 的方法, 直接串在 module 物件後面即可.

別忘了, 這個 controller 名稱是 'GreetingController', 只定義在 Javascript 裡, HTML 並不知道它的範圍是哪裡道哪裡,

所以可以找個 <div> </div>來加 ng-controller = 'GreetingController' 如下

所以我們希望 <ng-taiwan/> 這個 element directive 在 Javascript code 裡改成

template: '<h1>哈囉 {{ greeting }}! using directive: ng-taiwan </h1>'

greeting 這個變數, 在這個範圍內是被 'GreetingController' 的 ng-controller 所控管. 所以 $scope.greeting 的值就會顯現出來, "哈囉 你好", 不再隨著 sometext 變數變動了.