AngularJS--雙向數據綁定

 

Google AngularJS是一個JS框架，適用於以數據操做爲主的SPA應用。全部的操做都是以數據爲出發點。四大特性：

  (1)MVC模型

Model：即業務數據   $scope.xx  $rootScope.xx

View：即業務數據的呈現   HTML + ngXxx

Controller：負責操做業務數據   .controller('', function(){})

  (2)雙向數據綁定

方向1：Model綁定到View，只要Model變View隨着變

方向2：View(表單控件)綁定到Model，只要View變Model隨着變

  (3)依賴注入

  (4)模塊化設計

 

面試題：AngularJS的最大的不足/應用時須要特別關注的地方？ 原生ES/JS/DOM只有特定HTML元素的特定事件的監聽機制，沒有監聽數據/對象/值改變的機制。

$interval和window.setInterval()的區別？ $interval修改的任何Model數據，底層會當即遍歷一遍$digest隊列； setInterval()即便修改了Model數據，也不會遍歷$digest隊列；

$interval(function(){ $scope.count++; }, 1000) 等價於 setInterval(function(){ $scope.count++;  $digetst()/$apply(); }, 1000)

 

 

2.依賴注入

 Dependency：若某個函數調用時須要其它的對象做爲形參，就此函數依賴於形參對象。

 function Driver( car ){          //司機依賴於一個car對象

       car.start();

car.run();

car.stop();

 }

 如何解決依賴關係：

  (1)主動建立方式

var c1 = new Car(); //主動建立依賴對象

var d1 = new Driver( c1 );  //傳遞依賴對象

  (2)被動注入(Injection)方式

module.controller('控制器', function($scope, $interval){})

    Angular中的ngController指令在實例化控制器對象時，會根據指定的形參名，建立出控制器所依賴的對象，並注入給控制器對象——依賴注入（Dependency Injection，DI）現象。

  注意：

(1)Angular在建立控制器對象時，會根據形參列表中的每一個形參的名稱來建立依賴的對象，故控制器聲明函數不能聲明Angular沒法識別的形參名——Angular只提供了這一種依賴注入方式——根據形參名來注入依賴的對象！

      (2)若項目JS文件使用了相似yuicompressor等壓縮程序，默認會把函數的形參名精簡爲一個字母的形式，會致使Angular的依賴注入失敗！解決辦法：

module.controller('控制器名', [

'$scope',

'$interval',

'$http',

function(aaa,bbb,ccc){}

])

 

 

["num1", 'num2', 'num3', function add(n1, n2,n3){}]

var num1=10;

var num2=20;

var num5=50;

var num3=30

add(10, 20, 30);

 

 

3.能夠被注入的對象——全部的service/provider對象均可以被注入

  (1)$rootScope：在多個控制器間共享數據的服務

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

  (3)$timeout：

  (4)$log：提供五個基本的日誌輸出服務

  (5)$http：提供異步HTTP請求（AJAX）服務

用法： $http({method:'GET', url:'/xx.php'}).

success(fn).

error(fn);

簡化版：  $http.get('url').success(fn);

$http.post('url', data).success(fn);

  (6)$location

 

 

 

 

4.ng模塊中提供的過濾器(filter)

  Filter: 把Model數據在顯示時以某種特定的格式呈現。

  (1)lowercase

語法： {{ 表達式 | lowercase }}

  (2)uppercase

語法： {{ 表達式 | uppercase }}

  (3)number

語法： {{ 表達式 | number }}

  {{ 表達式 | number : 小數位數 }}

  (3)currency

語法： {{ 表達式 | currency }}

  {{ 表達式 | currency : '貨幣符號' }}

  (3)date

語法： {{ 表達式 | date }}      默認格式： Sep 1, 2015

  {{ 表達式 | date : '日期時間格式'}}

 

 

5.Web項目中多頁應用和單頁應用的比較

  Mutiple Page Application

  Single Page Application

多頁應用	單頁應用(SPA)
項目中有多個完整的HTML頁面	整個項目中只有一個完整的HTML頁面；其它HTML文件都是HTML片斷
使用超連接、JS實現頁面跳轉	使用超連接、JS實現「僞跳轉」
全部的頁面請求都是同步的——客戶端在等待服務器給響應的時候，瀏覽器中時一片空白	全部的「僞頁面請求」都是異步請求——客戶端在等待下一個頁面片斷到來時，仍能夠顯示前一個頁面內容——瀏覽體驗更好
不便於實現兩個頁面間切換過場動畫	很容易實現兩個僞頁面間的過場切換動畫
瀏覽器須要不停的建立完整的DOM樹、刪除完整的DOM樹	瀏覽器只須要建立一個完整的DOM樹，此後的僞頁面切換其實只是在換某個div中的內容。
每一個頁面都須要加載本身的CSS和JS文件	整個項目的CSS和JS文件只須要加載一次

 

手動實現單頁應用的步驟：

(1)建立一個完整的HTML頁面（如index.html)，引入所須要的全部CSS和JS；body中只須要一個僞頁面的容器元素，如<div></div>

(2)建立若干個僞HTML頁面/模板頁面：只須要聲明HTML片斷

(3)客戶端請求完整的HTML頁面，同時URL中再追加一個特殊的標記，如http://127.0.0.1/index.html#/start——指定要加載的僞頁面的名稱

(4)瀏覽器解析出僞頁面名稱，查找一個字典，找到該名稱對應的模板頁面的URL

window.location.hash

#/start            =>                template/start.html

#/m               =>                template/main.html

#/detail          =>                template/productdetail.html

(5)客戶端發起異步的AJAX請求，獲取模板頁面的內容，加載到index.html的僞頁面容器中便可

 

 

 

 

6.AngularJS提供的模塊——ngRoute

  Route：路由，經過某條線路找到目標內容。

  ngRoute模塊的用途：就是根據瀏覽器中URL中的一個特殊的地址標記(形如#/xxx)，查找到該標記所對應的模板頁面，並異步加載到當前頁面的ngView指令中。使用步驟：

  (1)建立惟一完整的HTML頁面，其中聲明一個容器，ngView指令。引入angular.js和angular-route.js

  (2)建立多個模板頁面(習慣上放在一個特別的目錄下，如tpl)

  (3)建立Module，聲明依賴於ng和ngRoute兩個模塊。

  (4)在Module中配置路由字典。

  (5)使用瀏覽器作測試：

http://IP地址/index.html#/路由地址

 

 

7.ngRoute模塊中的僞頁面跳轉

(1)經過超連接跳轉

<a href="#/路由地址">    #不能省

(2)經過JS跳轉

<button ng-click="jump()"></button>

$scope.jump = function(){

//location.href="2.html"        不能使用多頁面應用中的跳轉

$location.path('/路由地址');    //#不能有

}