『AngularJS』一點小小的理解

AngularJS 是一個前端的以Javascript爲主的MVC框架。與AngularJS相相似的還有EmberJS。

隨着時代在進步，各類各樣的開發理念與開發框架不斷的提出與發展，而就目前來講，除了遊戲、IM（相似QQ）、Office這類軟件以外，新出的軟件應用開始出現兩個方向，一個是以Web爲主的Web APP，一個是以移動端爲主的移動APP。且，現有也有一種聲音認爲Web APP遲早會取代移動端原生APP，從而一統計算機軟件的應用方式。暫且不論這種說法是否會成爲現實，Web APP的火爆可見一斑。

三年前，我編寫的Web軟件，還都是之後臺爲主，前臺頂多用一下jQuery來進行幾個簡單的動態效果。兩年前，我接觸ExtJS，知道還有這麼一種Javascript框架可以實現完整的UI訂製，從而只須要使用Ajax傳數據就能夠了。

如今（實際上已經出來很長時間了），我瞭解到EmberJS以及AngularJS這種將前端的UI構建過程拆分爲以前只在後端使用過的MVC的模式。從另外一個角度說，如今是把原先的MVC中的V再度拆分一個MVC的應用。

因此，我認爲，不管從哪一個角度來考慮，單獨的將Angular提出來，進行思考和學習是頗有必要的。

AngularJS是什麼？

AngularJS是一個由Google支持的Web App前端MVC框架。

AngularJS包括什麼？

從AngularJS的官方文檔中看到，它主要包括以下幾個概念：

• Template —— 模板
• Directive —— 指令
• Filter —— 過濾器
• Controller —— 控制器
• Scope —— 範圍
• Service —— 服務
• Module —— 模塊

Template Directive Filter這三個主要與「視圖」有關。 Controller Scope Service這兩個主要與「控制器有關」。 Module用於結構化項目。

注意：就像上面看到的那樣，在AngularJS中，沒有找到有關Model層的東西！

下面是對各個概念的理解以及如何應用的想法。

• Directive是一種屬性，寫在HTML標籤當中，用戶標識出模板中一些特殊的東西。好比用於顯示「部分模板」的<div ng-view></div>。
• Filter根據官網的解釋，是用於控制視圖中的元素如何顯示，或者說顯示成什麼樣的。
• Template是視圖層的具體載體，在Template中能夠寫一些輔助的邏輯，如ng-if等
• Controller是控制器，根據官方文檔的建議，不該該在Controller中寫太複雜的東東，在控制器中只寫有關業務邏輯的就能夠了。
• Scope，這個東西在看控制器的介紹的時候看到，在我的理解來看，應該是主要用於進行視圖與控制器的數據操做，或者認爲是用於打通視圖層與控制器的一個東東。
• 因爲文檔中寫到，不建議在控制器中寫太複雜的邏輯，因此咱們應該把全部的可供複用的邏輯寫到Service（服務）當中。而後咱們能夠利用AngularJS框架自己的DI（依賴注入）功能將Service注入到具體的控制器中。
• Module，這個東西相似Java的類庫的概念，咱們寫的全部的控制器、過濾器、服務等都得加到Module中，沒什麼好說的~

這裏要注意一個問題——模型。

按照我的的理解，不論AngularJS再怎樣，其數據的直接來源仍是服務器，而服務器傳數據的話，如今比較流行使用JSON格式，因此，就模型層來講，咱們只要利用Service從服務器中獲取數據，而後將其解析給在Controller中對應的Scope就好了。剩下的就是AngularJS內部處理，將數據自動綁定到前臺了~

參考：

• 官方文檔
• 官方示例