本文以一個基于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架構學習的入門了解的輔助參考。