AngularJS Controllers

第二個影片是在講Angular的Controllers
以下是今天的筆記

AngularJS Controllers



這個教學的程式碼是延續 AngularJS Binding 的
最主要的改變是：原本是由使用者輸入的內容來改變 data.message 的內容
這次則是讓 controller 來改變

至於 controller 要怎麼加呢？
就是用 <div> 把要控制的區塊夾起來
然後加上 ng-controller 的標籤
如第12行所示 <div ng-controller="FirstCtrl">

加完 controller標籤後
要加入第六行的 <script type="text/javascript" src="main.js"></script>
表示我們會把 controller 的 function 寫在 main.js 這個檔案裏面

接這來看看 main.js
main.js 裡面只有一個 function 叫 FirstCtrl
這個 function裡有一個參數 $scope
代表這個 controller (也就是第12-18行) 裡面的變數

現在我們刪掉 <input> tag
改由 controller 來給 data.message 新的值

在 main.js 裡面輸入$scope.data = {message: "hello"};
意思就是賦予 data.message "hello" 這個值

輸入 $scope.data = {message: "label"};
也一樣可以讓下方顯示的文字改變套用的 css 樣式