接下來簡單說明一下 Controller 與 View 在 AngularJS 間的關係
因為 Model 比較麻煩~ 之後再說吧。
如何建立一個 Controller ?
可以透過 module 物件呼叫 controller 方法來建立，如下：
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.controller("demoCtrl", function($scope){
$scope.name = "Allen";
});
</script>
第一行先建立一個名為 demoApp 的 module 的物件，接下來透過
此 module 物件呼叫 controller function 來建立一個名為 demoCtrl 的 Controller
controller function 需要傳入兩個參數
第一個為 Controller 的名子，
第二個是一個 function 在 Controller 被建立時會被執行
什麼是 $scope ?
上例中的 function 內有一行 $scope.name = "Allen";
這行描述了我要在 $scope 物件內給予一個屬性 name，值是 Allen
而 $scope 表示的是 Controller 與 View 之間的一個"作用域"，如下圖：
簡單來說他關聯了這個 Controller 以及其對應的 View 的資料，
至於 $scope 怎麼來的，其實是 AngularJS 的依賴注入系統所給予的，
細節之後在寫文章介紹，總之可以先當作你需要，AngularJS就會給你
如何對應 Controller 到 View 上?
每個 Controller 都負責控管 HTML 上的某段區域，我們可以利用 ng-controller 屬性
來指定一個 Controller 到一個 HTML 上，如下：
<div ng-controller="demoCtrl">
Name: {{name}}
<div>
Name again: {{name}}
</div>
</div>
我指定了 "demoCtrl" 於 div 標籤上，因此 demoCtrl 的作用範圍就會是此 div 下所有的內容
因此在執行期間遇到 {{name}}，會從 demoCtrl 的 $scope 找出是否有 name 這個屬性並呈現出來
如果你在這個 div 之外寫上 {{name}} 是不會顯示出值的。
如何反應 View 的行為到 Controller 上?
例如使用者按下頁面上的按鈕，我們該如何處理這個 click 事件
首先 AngularJS 提供很多方法來聆聽 HTML 上的事件 (Ex：onclick, onselect....)
以 click 為例，我們可以利用 ng-click 來聆聽 click 事件，如下：
<button ng-click="changeName()">Click me</button>
當 button 被按下時會呼叫 $scope 的 changeName function ，
所以我們就必須將對應這個 View 的 Controller 的 $scope 物件加上 changeName
demoApp.controller("demoCtrl", function($scope){
$scope.name = "Allen";
$scope.changeName = function(){
$scope.name = "AllenFang";
};
});
結果最後你會發現按下按鈕之後，View 上面的資料會變(Allen => AllenFang)
你可能想說我只是更動了 $scope 的 name 屬性值，怎麼連 View 上的值都會變
這是因為 AngularJS 的 Two-way data binding 的因素，詳情可以看AngularJS Data Binding
這也是很多前端框架會提供的功能，之後我會再詳細描述。
以下為完整程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="demoApp">
<head>
<title>Bootstrap
Examples</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script>
var
demoApp = angular.module("demoApp", []);
demoApp.controller("demoCtrl", function($scope){
$scope.name = "Allen";
$scope.changeName = function(){
$scope.name = "AllenFang";
};
});
</script>
</head>
<body>
<div ng-controller="demoCtrl">
Name: {{name}}
<div>
Name: {{name}}
</div>
<button ng-click="changeName()">Click me</button>
</div>
</body>
</html>
沒有留言:
張貼留言