前言
之前有接觸過基本的AngularJS，未過多涉及，於是乎本系列我們來着重講講AngularJS，對AngularJS中重要的幾大內容進行梳理並進行一些小的例子的書寫。在之前項目過程中用到過avalon，但是avalon並未被廣泛使用也就放棄了，至於孰最輕量，性能更好作為非專業的我就不妄下結論，lz只明白一點，業界最流行什么前端框架，招聘大部分要求會哪些框架，lz才會去學習，當然其中的樂趣也是油然而生，每一次敲代碼的過程好似在浩瀚大海中探幽一番，別有一番滋味。
簡短介紹
AngularJS也是一種MVVM前端框架，其中的路由、指令、服務、工廠等。它幫助了我們開發前端UI並簡化了一些繁瑣的過程，同時它也恰如其分的支持客戶端的單元測試。它涉及到Model、View、Controller。當AngularJS應用程序被啟動時，其Model、Controller、View以及HTML文檔都會被加載到用戶的設備上，最終運行在用戶設備的硬件中。至於Model、View、Controller這三者之間的聯系，我們看如下圖便知。
HelloWorld
貌似每學一門新的語言或者框架首先都會想到的是和這個世界打個招呼，下面我們利用AngularJS和這個世界來打個招呼。
（1）頁面定義模塊然后獲取模塊
var app = angular.module('myApp', []);
（2）定義控制並獲取該控制器進行對應的賦值
app.controller('ctrl', ['$scope', function($scope){
$scope.greeting = {text:"Hello"};
}])
（3）UI頁面
<html ng-app="myApp"> <head> <title></title> <script type="text/javascript" src="Scripts/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="HelloWorld.js"></script> </head> <body ng-controller="ctrl"> {{greeting.text}},World </body> </html>
最終結果如下：
（1）模塊：AngularJS中的module作為Angular應用程序的入口點。那模塊從何而來呢？這里不做過多探討，涉及到依賴逐入的概念。依賴逐入是AngularJS中主要的優點之一，在DI作為一種設計模式被定義在應用程序中作為配置的一部分，如此一來，無需我們手動去創建，當應用程序首次啟動時，DI會自動加載模塊依賴。
（2）模型類：拿MVC類比，我們通過模型來獲取數據，此時我們必須定義模型類，同理在大多數JavaScript客戶端框架中也會要求我們創建模型類，但是在AngularJS中這種情況不會發生，在AngularJS中有一個$scope對象，此對象用來存儲模型類，Scopes被附加到DOM元素上，我們可以通過使用數據屬性到$scope的對象。$rootScope是AngularJS程序中的父Scope。
（3）控制器：在AngularJS中控制器作為視圖和model的橋梁，在這個控制器這個區域中我們可以放置一個視圖的所有業務邏輯。當應用程序中的業務邏輯被多個控制器所使用時，此時我們應該將業務邏輯放置在AngularJS中的Service（服務）中，當我們需要用到這些業務邏輯時，我們需要在DI的幫助下來獲取這些服務。
下面一張圖簡短的概括了視圖（View）、$scope、控制器（Controller）之間的關系。
$scope與Controller
我們通過一個例子來看這二者之間的關系：
UI
<html ng-app="myApp"> <head> <title></title> <script type="text/javascript" src="Scripts/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="scopeController.js"></script> </head> <body> <div ng-controller="ctrlName"> <input type="text" width="200px" ng-model="name" /> <h2>Your Name : {{name}}</h2> </div> </body> </html>
JS
app.controller('ctrlName', function ($scope) {
$scope.name = '';
});
我們看看演示效果：
Controller as語法
對於上述我們可以通過另外一種方式實現，在AngularJS 1.1.5版本后開始支持控制器as語法。我們給出代碼看看。
UI
<html ng-app="myApp"> <head> <script type="text/javascript" src="Scripts/angular.min.js"></script> <script type="text/javascript" src="app.js"></script> <script type="text/javascript" src="myCtrl.js"></script> <title></title> </head> <body ng-controller="myCtrl as u"> <h2>{{u.username}}</h2> <h1>請輸入你的名字 :</h1> <input type="text" width="200px" ng-model="u.name" /> <h2>你的名字是 : {{u.name}}</h2> </body> </html>
JS
app.controller('myCtrl',function(){
var self = this;
self.name = "";
self.username = "xpy0928";
})
結果演示：
總結
本節我們簡短的介紹了AngularJS以及一些基本概念。下節再見。