標籤：上下文 存在 資料繫結 utf-8 控制 sage return 學習 ril
本文以一個基於angularJS架構的簡單應用分析angularJS應用的基本架構
1.理解幾個基本概念1.1 angularJS控制器
對於剛入門的童鞋來說，提到控制器可能想到了就是電器上的一些開關或者控制裝置等，實際上，在JavaScript編程中也有控制器這一概念，angularJS控制器（以下簡稱控制器）指的是附加在文件物件模型（DOM）節點上的函數，用來驅動應用程式的邏輯。通俗的說就是把一部分的JavaScript功能（方法）封裝在一個js檔案中，在html檔案中進行調用來實現一些功能。
在angularJS中，控制器就是控制angularJS應用程式的資料，用來和範圍通訊並響應事件，根據習慣的命名規則，控制器檔案都一般都含有“控制”的英文單詞全寫“control”或簡寫“ctl”這些字母，在html檔案中以ng-controller指定進行定義，在控制器檔案中，以controller()方法進行調用。
1.2 angularJS範圍
angularJS範圍（以下簡稱範圍）可以理解為應用程式在HTML視圖（以下簡稱視圖）和控制器之間的上下文，是控制器和介面之間的橋樑（或者中轉站），也就是說，控制器中除了範圍，其他的所有內容都是與應用的其他部分隔離的，當範圍在控制器中更新時，視圖也會更新；
在angularJS中，提供$scope對象作為範圍的參數傳遞，它的書寫位置在控制器中。
1.3 angularJS模組
angularJS模組(以下簡稱模組)是將一組緊密聯絡的邏輯封裝在一起，然後利用模組的依賴注入與其關聯的模組內容，通俗的說，就是將html中的一組相互聯絡的組件封裝在一個定義的模組中，然後通過模組在控制器中定義這些組件的方法，來實現對視圖的行為控制，angularJS中使用angular.module(‘demo’, [])方法定義模組，demo為被封裝的組件，[]內為可選依賴，這個後面的文章會講到，當沒有[]時，該方法指的是擷取已經定義的模組，兩個是不一樣的方法。
2.一些angularJS指令ng-app指的是定義一個angularJS應用程式，位於應用程式的根項目下；
ng-model 指令把元素值（比如輸入欄位的值）綁定到應用程式；
ng-bind 指令把應用程式資料綁定到 HTML 視圖；
ng-controller 指令定義了應用程式控制器，一個應用可以有很多控制器；
angularJS中很多內建指定都是以ng開頭，比如ng-show用於修改顯示樣式；ng-form作用於表單；ng-click用於監聽事件等。
注意：在JavaScript中，文法不允許變數名使用連字號，所以使用了諸如ngApp,ngClass的駝峰命名，而在html中多以連字號形式書寫。
3.以留言簿程式為例分析angularJS簡單架構3.1 架構組成
代碼分四三個部分，index.html為視圖檔案，noteApp.js為應用程式模組檔案，noteCtrl.js檔案為應用程式控制器檔案，angular.min.js為angularJS架構檔案。
index.html視圖檔案：
<!DOCTYPE html><html ng-app="note"><head><meta charset="UTF-8"><title>angular</title><script src="js/angular.min.js"></script></head><body><div ng-controller="noteCtrl"><h2>留言板</h2><div><textarea ng-model="message" cols="40" rows="10"></textarea></div><button ng-click="save()">儲存</button><button ng-click="clear()">清除</button><p>剩餘字數：<span ng-bind="left()"></span></p></div><script src="js/noteApp.js"></script><script src="js/noteCtrl.js"></script></body></html>
noteApp.js模組檔案：
var app = angular.module("note",[]);
noteCtrl.js控制器檔案：
app.controller("noteCtrl",function($scope){$scope.message = "";$scope.left = function(){return 100 - $scope.message.length;};$scope.clear = function(){$scope.message = "";}$scope.save = function(){alert("儲存成功");};})
預設效果如下所示
3.2 架構分析
整個應用程式被ng-app=”note”定義為一個應用程式，ng-app 指令位於應用的根項目下，應用的根可以是整個頁面，或者頁面的一小部分，對於單頁應用，應用的根通常為 <html> 元素；通過angular.module("note",[])方法被封裝成模組noteApp.js檔案，通過制定ng-contriller=”noteCtrl”定義了這個應用程式的控制器為檔案noCtrl.js檔案；
通過制定ng-model=”message”將變數message的值綁定到應用程式中，通過指定ng-bind="left()"將應用程式綁定到視圖中，通過指定ng-click()指令調用控制器中的函數為視圖中組件綁定事件；
其中視圖中的變數message和事件left()以及click()都是通過控制器中的$scope範圍來與控制器中的函數（方法）進行交換資訊。
3.3 架構互動
angularJS在視圖內容匯入時自動開始(即使用者開啟頁面時開始)，如果找到 ng-app 指令 ， AngularJS 載入指令中的模組，並將ng-app 作為應用的根進行編譯。
當使用者輸入內容時，視圖中資料儲存在範圍中，控制器根據範圍中的資料，調用計算剩餘字數函數，通過範圍返回到視圖中，會看到剩餘字數多少；當使用者點擊儲存或情況時，資料也會被傳遞到範圍中，控制器從範圍中擷取資料進行處理並將處理後的資料通過範圍返回給視圖，會看到儲存彈框和清空效果。
整個互動過程都是在模組中進行的，或者理解為noteApp.js將控制器（包括範圍）和視圖封裝在模組裡面，資料交換和處理都是在這個模組中進行。
用流程圖表示如下所示
以上只是介紹了angularJS所構建的一個最簡單的應用程式架構，其實一個稍微複雜一點的應用程式架構可能還包括伺服器，過濾器，http請求等等，因此本文僅作為angularJS架構學習的入門理解的輔助參考。
angularJS搭建簡單應用程式的基本架構分析
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
