前言

之前有接觸過基本的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頁面

    
    

    

    

    {{greeting.text}},World

最終結果如下：

 

（1）模組：AngularJS中的module作為Angular應用程式的入口點。那模組從何而來呢？這裡不做過多探討，涉及到依賴逐入的概念。依賴逐入是AngularJS中主要的優點之一，在DI作為一種設計模式被定義在應用程式中作為配置的一部分，如此一來，無需我們手動去建立，當應用程式首次啟動時，DI會自動載入模組依賴。

（2）模型類：拿MVC類比，我們透過模型來獲取資料，此時我們必須定義模型類，同理在大多數JavaScript客戶端框架中也會要求我們建立模型類，但是在AngularJS中這種情況不會發生，在AngularJS中有一個scope對象，此對象用來存儲模型類，Scopes被附加到DOM元素上，我們可以通過使用數據屬性到" tabindex="0" id="MathJax-Element-1-Frame" class="MathJax">scope對象，此對象用來存儲模型類，Scopes被附加到DOM元素上，我們可以通過使用數據屬性到scope對象，此對象用來存儲模型類，Scopes被附加到DOM元素上，我們可以通過使用數據屬性到

scope的物件。$rootScope是AngularJS程式中的父Scope。

（3）控制器：在AngularJS中控制器作為檢視和model的橋樑，在這個控制器這個區域中我們可以放置一個檢視的所有業務邏輯。當應用程式中的業務邏輯被多個控制器所使用時，此時我們應該將業務邏輯放置在AngularJS中的Service（服務）中，當我們需要用到這些業務邏輯時，我們需要在DI的幫助下來獲取這些服務。