AngularJS--MVC模型

 

Google AngularJS是一個JS框架，主要思路不是傳統的「先查找再操做DOM元素」，而是「以數據爲中心」。適用於以數據操做爲主的SPA應用。

Angular四大特性：

  (1)MVC模型

Model：模型，即業務數據，在前端應用中就是保存在特定範圍的JS變量

View：視圖，即業務數據在用戶面前的呈現，在前端應用中就是HTML

Controller：控制器，負責業務數據的獲取、修改、刪除等，在前端應用中由function來擔當。

  (2)雙向數據綁定

  (3)依賴注入

  (4)模塊化(Module)設計——體現「高聚合低耦合」設計原則

 

面試題： AngularJS與jQuery的關係？   jQuery操做思路：先找元素，再操做元素   $(....).xxx();   AngularJS操做思路：建立業務數據、綁定數據、維護數據   AngularJS已經把底層/低級的DOM操做，爲開發者封裝起來了     AngularJS在加載時會查看當前頁面是否已經加載了jquery.js(就是判斷window.jQuery是否存在)，若存在則全部的DOM操做全都使用jQuery提供的方法；若不存在，則anglarJS會使用自定義的jQuery精簡版本——jqLite——只有jQuery的核心方法。

 

 

1.MVC模型

  (1)在一個Angular應用中能夠聲明多個模塊(module)

  (2)某個模塊能夠依賴於其餘的模塊

  (3)有一個模塊必須註冊給ngApp指令——啓動模塊

  (4)一個模塊中能夠聲明多種組件，如：

1)controller

2)directive

3)service

4)filter

5)...

 

2.控制器的做用範圍/做用域

  (1)每次調用ngController都會建立一個新的Controller對象

  (2)每一個Controller對象都有惟一的$scope對象

  (3)$scope就表示當前控制器對象的有效範圍/做用域

  (4)聲明在某個$scope中模型數據，通常狀況下不能被其餘的控制器所使用。

  (5)若想在多個控制器間共享/傳遞數據，能夠聲明在根做用域中——$rootScope—每一個Angular應用(ngApp)只有一個惟一的$rootScope對象

 

  (6)控制器的本質用途：用於劃分一個大型頁面中的不一樣的DIV塊——每一個這樣的塊中都有本身專用的數據，以及能夠與其餘塊共享的數據。

 

 

3.AngularJS四大特性之二——雙向數據綁定——偏難&重點！

  (1)方向1：Model綁定到View，此後不論什麼時候只要Model發生改變，View會自動當即同步更新。

實現方法：{{ }}、ngBind、ngIf、ngRepeat、ngShow、ngChecked ... 等等幾乎全部的顯示數據的指令都實現了方向1的綁定。

練習：

1)建立一個點擊計數器，有一個按鈕，只要點擊一次，當即顯示出點擊次數。

2)仿寫輪播廣告中的「前進/後退」按鈕，提示：忘掉傳統的輪播廣告！注意img的src屬性值能夠賦值爲一個Model數據，而此數據能夠使用模型函數進行修改。

 

  (2)方向2：View綁定到Model，把視圖中用戶能夠修改的HTML元素——即表單控件——的值綁定到一個Model變量上。此後，不論什麼時候只要用戶修改了表單控件的值，後臺模型變量的值會當即隨之改變。

實現方法：只有ngModel指令能夠！ 爲了監視到Model變量真的被改變了，能夠使用$scope.$watch()函數對Model數據的值進行監視。

·單行文本輸入域，ngMode能夠把value屬性值綁定到Model變量

·複選框，ngModel能夠把true/false值綁定到Model變量

·單選框，ngModel能夠把當前選中的單選框的value值綁定到Model變量

·下拉框，ngModel能夠把當前選中的option的value值綁定到Model變量

 

 

 

 

4.ng模塊中提供的service組件

  (1)$rootScope     用於在全部的控制器間共享數據的服務

  (2)$interval          週期性定時器服務

  (3)$timeout         一次性定時器服務

 

 

5.ng模塊提供的directive組件

  (1)ngApp

  (2)ngInit

  (3)ngBind

  (4)ngIf

  (5)ngRepeat

  (6)ngClick： 爲元素綁定單擊事件的監聽函數——只能是Model函數($scope.函數名=function(){})，不能是全局函數

  (7)ngMouseOver ....

  (8)ngSrc: 爲IMG標籤指定src屬性，但能夠防止404請求錯誤

  (9)ngShow:  若賦值爲true，則display:block；不然display:none;

  (10)ngHide:  若賦值爲true，則display:none；不然display:block;

 

 

如何壓縮js文件？ Yahoo User Interface，YUI項目中提供了一個很好用的壓縮程序：yui-compressor 可用於壓縮CSS、JS文件。使用步驟： (1)安裝Java運行環境 (2)編寫JS/CSS文件，用於壓縮 (3)運行yuicompressor工具，執行壓縮   提示：能夠把yuicompressor配置爲WebStorm中的FileWatcher，監視js/css文件，實現自動的壓縮   注意：壓縮工具會執行以下的壓縮：  (1)刪除全部的註釋  (2)刪除全部的無用的空白字符  (3)變量名、函數名、形參名儘量的簡化 -----------------------------------------------------------------  (4)注意：全部的數據和值不會進行簡化！

 

 

6.AngularJS四大特性之三——依賴注入