Unit03： 模塊化設計 、 路由模塊 、 動畫模塊

【Angular Js】

方向一：

面試題：Angular Js最大的不足/應用時須要注意的地方？

原生的ES/JS/DOM中只有html元素特定事件的監聽機制，沒有監聽數據的機制；

$digest隊列：消化吸取數據；

 view中每寫一個表達式{{}}、ng-repeat指令等，就會在$digest隊列中建立一個對應的監聽函數，只要$scope範圍內的數據發生改變，$scope就會遍歷範圍內全部的監聽函數從而改變view的數據，若是數據太多，會影響性能，

 

 

 解決方法：建立多個controller，這樣每一個controller中的數據就少一些;

 

【$interval與setInterval】

$interval修改model數據，底層會當即遍歷一遍$digest隊列；

setInterval()即便改變了數據，也不會遍歷$digest隊列；

$interval(function(){$scope.count++},1000)

等價於

$interval(function(){$scope.count++; $digest()/$apply()},1000) //強制遍歷$digest隊列；

 

1.依賴注入

    dependency

    若某個函數調用時須要其它的對象做爲形參；此函數依賴於形參對象；

    如何解決依賴關係：

    1）主動建立

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

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

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

        moudle.controller('',function($scope,$interval){});

        Angular中的ng-controller指令在實例化控制器對象時,會根據指定的形參名，建立出控制器所依賴的對象；並注入給控制器對象 -- 依賴注入(Dependency Inject)現象；

    注意：

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

        2- 若項目中使用了壓縮程序，默認會把函數的形參名精簡爲一個字母，會致使Angular的依賴注入失敗；

            解決方案：

            moudle.controller('myctrl',['$scope','$interval',function(a,b){ }]);

 

2.能夠被注入的對象：全部的service/provider均可以被注入；

    1) $log:能夠提供五個級別的日誌；

    2）$http:提供異步的HTTP（AJAX）請求的服務；

        $http.get()

        $http.post()

        $http.put()

        $http.delete()

        用法：

         1- $http({method: 'GET', url: '/someUrl'})

           .success(Function(data, status, headers, config) { })

           .error(Function(data, status, headers, config) { });

         2-  $http.get('/someUrl').success(successCallback);

             $http.post('/someUrl', data).success(successCallback);

    3) $location

 

rand(1,999) php裏隨機整數；

 

3.ng模塊中提供的過濾器（filter）

    把model數據以特定的格式呈現；

    - lowercase

        HTML: {{ uppercase_expression | lowercase}}

        JS: $filter('lowercase')();

    - uppercase

        HTML: {{ uppercase_expression | uppercase}}

        JS: $filter('uppercase')();

    - number

        HTML: {{ uppercase_expression | number}}

        HTML: {{ uppercase_expression | number:小數位數}}

        JS: $filter('number')(number, fractionSize);

    - currency

        HTML: {{ currency_expression | currency }}

        HTML: {{ currency_expression | currency : '￥'}}

        JS: $filter('currency')(amount, symbol)

    - date

        HTML: {{ date_expression | date : format}}

              如： {{p.birthday | date:'yyyy-MM-dd HH:mm:ss'}}

        JS: $filter('date')(date, format)

 

4.web中多頁應用與單頁應用；

Mutiple Page Application

Single Page Application

多頁應用:

    項目中有多個完整的頁面；

    使用超連接(js)跳轉；

    全部的頁面請求:同步 -- 客戶端在等待服務器響應的時候，瀏覽器一片空白；

    不便於實現兩個頁面間的切換過場動畫；

    瀏覽器須要不停的建立DOM樹；

    每一個頁面都有加載本身的css、js文件；

單頁應用:

    整個項目中只有一個完整的HTML頁面，其餘html都是片斷，只包含DIV；

    使用超連接(js)僞跳轉；

    全部的"僞頁面請求":異步 -- 客戶端在等待下一個頁面到來時，任然能夠顯示前一個頁面；

    實現兩個「僞頁面」切換過場動畫；

    瀏覽器只須要建立一個完整的DOM樹，此後的頁面切換隻是再換某個div的內容；

    css、js文件只須要加載一次；

 

手動實現單頁應用：

    1.建立一個完整的HTML頁面，引入全部的css、js，body中須要一個 僞頁面容器，如div

    2.在建立多個 僞頁面；只有HTML片斷；

    3.客戶端請求HTML頁面，同時在url中追加一個特殊標記(僞頁面名稱)；如：index.html#/start（路由地址）

    4.瀏覽器要用js解析僞頁面名稱；查找字典，找到該名稱對應的 僞頁面url；

        window.location.hash/

5.客戶端發起的ajax請求，獲取僞頁面內容，加載到index的僞頁面容器；

 

 

 

6.【ngRoute模塊】

    Route:路由：經過某條線路找目標內容

    ngRoute:模塊的目標，就是根據瀏覽器中的URl中的一個特殊地址標記，查找到該標記對應的頁面，並異步加載到當前頁面的ngView指令中；使用步驟：

    1）建立惟一的html頁面，聲明容器ngView指令，引入angular.js angular-route.js

    2）建立模塊頁面

    3) 建立module 聲明依賴ng ngRoute兩個模塊；

    4）在module中配置路由字典

    5）使用瀏覽器測試

        http://IP地址/index.html#/strat;

 

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

    鏈接 <a href="#/m(路由地址)" >跳轉到main</a>

    js

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

          跳轉到detail

        </button>

          $scope.jump=function(){

            $location.path('/d(路由地址)');

          }