Unit02： 雙向數據綁定 、 依賴注入 、 過濾器

【Angular Js】

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

Angular的四大特性：

1.MVC模型

           1).Model：模型，就是「業務數據」，前端項目中JS中的變量；

           2).View：視圖，「業務數據」在用戶面前的展示；前端項目中就是HTML；

           3).Controller：控制器，負責「業務數據」中的增刪改查，前端項目中就是Function；

2.雙向數據綁定

3.依賴注入

4.模塊化(module)設計--體現高聚合低耦合的原則；

 

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

 

 

一個項目中能夠聲明若干個功能模塊(模塊名稱不能相同)，最終要有一個啓動模塊（註冊給ng-App指令）myModule1；

一個模塊能夠有多個控制器(控制器名稱不能相同)

  angular.module('myModule2',['ng']);

  angular.module('myModule3',['ng']);

  angular.module('myModule1',['ng','myModule2','myModule3']).controller().controller();

                             |-依賴的模塊列表

 

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

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

    2）每一個Controller都有一個惟一的$scope對象；

    3）$scope表示當前Controller的有效範圍；

    4）申明某個$scope中的模型數據，通常狀況下不能被其餘控制器使用；

    5）若想在多個控制器共享某個model數據->能夠在聲明根做用域中$rootScpoe；每一個Angular應用中只有一個惟一的$rootScpoe；

       $scope的優先級高於$rootScpoe；

 

 

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

 

3.雙向數據綁定

    1）方向1：把model綁定到view上，只要model發生改變，view也會跟着改變；

              實現方法：{{}}、ng-bind、ng-if、ng-repeat....幾乎全部的顯示數據的指令都實現了方向一的綁定；

              練習：

              1- 建立一個點擊計數器，有一個按鈕只要點一次，當即顯示出點擊次數；3.html

              2- 仿寫輪播廣告中的「前進 、後退」按鈕；

    2）方向2：把view綁定到model上，把視圖中能夠修改的值或HTML元素 -- 表單控件的值綁定到一個模型model變量,只要用戶修改了表單控件的值，後臺模型變量的值會當即隨之改變，

                只有ngModel指令能夠；*****

                單行文本輸入域： 是把value綁定到ng-model上；

                複選框： 是把布爾值(true / false)綁定到ng-model上；

                單選按鈕： 把當前選中的單選的value綁定到ng-model上；

                下拉框：把選中的option的value值綁定到ng-model上；

 

4.ng模塊提供的service組件

    1)$rootScope;

    2)$interval是Angular提供的定時器；

    3)$timeout;

 

 

5.ng模塊提供的指令組件

    ngApp

    ngInit

    ngBind

    ngIf

    ngRepeat

    1）ngClick:爲元素綁定單擊事件的監聽函數 -- 只能是Model函數($scope.函數名=function(){})；

    2) ngSrc: 爲img指定src，防止404；

    3) ngModel:把當前文本輸入域中的值綁定到model上； 方向2僅有的****其餘的都是方向1的指令

       $scope.$watch()監視一個model數據的每一次修改；

       如：

       <input type="text" ng-model="uname" >

       $scope.$watch('model',function(){

             console.log('model數據uname的值改變了'+$scope.uname);

           })

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

    5) ngHide:與ngShow相反；

    6) ngChecked:若是複選框是選中的只是true；

 

* *如何壓縮js文件* *

    yuicompressor-2.4.2.jar:YUI項目中提供的壓縮程序：可用於壓縮js,css

    1- 安裝java運行環境；

    2- 運行yuicompressor執行壓縮；

        cmd:

        webStrom:

如何壓縮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)注意：全部的數據和值不會進行簡化！字符串數字不會變；