Angular:

框架： 對程序員的限制高
庫：  jquery耘子，bootstrap —— 使用靈活鹃唯，對程序員的限制少
    它是MVC框架 精確定義是MVVM框架 mv*
    SPA (single page application) 移動端
MVC:
M:  Model           模型——數(shù)據(jù)
V:  View            視圖
C:  Controller      控制器

MVC 分離:

1.數(shù)據(jù)、邏輯、 表現(xiàn)層代碼的分離
2.分工
**學好:它最核心的核心的東西就是數(shù)據(jù) 

以前寫JS:存在大量的重復勞動
     window 事件 .....
Angular：避免了重復勞動，讓程序員更加關注需求的本質和實現(xiàn)友绝。
版本：
官網：https://angularjs.org/
混亂：
    1.2 以下
    1.3 以上  上課
    2.x 沒人用  angular2   
    3.x 消失
    4.x 即將要出來

基本用法：

Angular指令：
以 ng 開頭。
是否需要服務器環(huán)境——最好
oninput是input值改變的時候觸發(fā)
1肝劲、ng-app
  angular管轄的范圍
2迁客、ng-model
  數(shù)據(jù)，數(shù)據(jù)模型——  數(shù)據(jù)從哪來
3辞槐、ng-bind
  數(shù)據(jù)綁定 —— 數(shù)據(jù)到哪去
4坡贺、表達式{{a}}
  *Angular 和 原生的JS——不互通（事件嵌灰、函數(shù)）栓辜，可以解決刹悴。
5、ng-click
  事件：  ng-mouseover  ....
  * 只關注數(shù)據(jù)
6鹿榜、ng-init
  數(shù)據(jù)初始化
7海雪、ng-repeat  循環(huán) 
  循環(huán)數(shù)組：
    ng-repeat="item in arr" 
        {{item}}  —— 數(shù)組中的每一項
  循環(huán)JSON：
    ng-repeat="(key,value) in json"
        {{key}} —— json中的key 
        {{value}} —— json中的value
8、數(shù)組的索引：  $index  獲取本元素的索引
  *在數(shù)組里舱殿，默認情況下不允許出現(xiàn)重復的數(shù)字 如果有重復的會報錯
    track by  重新指定數(shù)組中的key
    以前:(key,value) in arr
    現(xiàn)在:item in arr track by $index
9奥裸、過濾器   filter
   currency : 貨幣的filter
      參數(shù)： currency:'￥'
  date:
      date:'yyyy MM dd HH(hh) mm ss'
  放 | 后面

Angular特性：

1).雙向綁定
    ng-bind:  不好 一開始清空內容
    *Angular——接管了 UI
    *Angular——擴展了html

Angular:

1、和原生的JS 是不互通 —— 可以得解決
2沪袭、和傳統(tǒng)的開發(fā)方式完全不同——只要盯住數(shù)據(jù)湾宙，數(shù)據(jù)是核心
不互通：
  1）函數(shù)不互通
      Number 示例
  2）變量不互通
      全局變量示例
  3）事件不互通

Angular:
1）雙向綁定
2）依賴注入
Controller:
1）放代碼
2）原生和angular之間的橋梁 —— 在controller中可以使用原生代碼
*一個頁面中，可以有多個模塊
*在一個模塊中冈绊，可以有多個控制器
*為什么不互通：因為angular的東西都在$scope身上创倔。

控制器： Controller

1）定義模塊 
    angular.module(模塊名,所依賴的其它模塊);
    let mod =  angular.module('mod1',[]);
2）引用模塊
    ng-app="模塊名"
3）定義Controller
    mod.controller('控制器名',回調函數(shù)($scope){ 
        //控制器的代碼
    });
4）引用controller
    ng-controller="ctr1"

*所有的數(shù)據(jù)都放在$scope 

$scope ：  依賴項

交互:

1、文本框中輸入圖片地址焚碌，img標簽加載圖片  ![]({{a}})
過程：
  瀏覽器看到img標簽，試圖去加載src里的圖片文件 
  現(xiàn)在給的圖片文件地址：  {{a}}
      —— 404 錯
  Angular 出來了 —— 開始干活： 它認識： {{a}}
      —— 翻譯成文本框中輸入的真實的圖片地址
解決方案：
ng-src

因為：瀏覽器不認識 ng-src

1霸妹、請求一個文本文件十电，內容顯示到頁面
   發(fā)現(xiàn)問題：
    jquery的ajax請求數(shù)據(jù)——正常
    請求回來的數(shù)據(jù)放到 $scope.arr —— 正常
    問題： 沒有顯示在頁面
    因為：  angular 比較封閉，和其它框架、庫配合不好鹃骂。

2台盯、angular提供了自己的做數(shù)據(jù)交互的方式：
    $http —— 依賴項
    依賴項： $scope   $http

用法：
    $http.get();
    $http.post();
    $http.jsonp();

  $http.get('請求地址').then(成功的回調，失敗的回調);

  $http.get('a.txt').then(r=>{
      //r 就是成功后的返回對象  ***r完整的angular http返回對象
      // r.data 才是數(shù)據(jù)
  },err=>{
    //err 失敗信息對象
  });

  ng-src    
  $http.get('接口/地址').then((r)=>{
    r//完整的對象
    //{data: Array[4], status: 200, config: Object, statusText: "OK"}
    r.data
  },(r)=>{
    console.log(r)
  })
    
3畏线、Promise
  回調函數(shù) —— 惡夢 噩夢
  2015年静盅，ES6——Promise

1）用法——基本用法：
    resolve: 成功
    reject: 失敗
    let pro = new Promise((resolve,reject)=>{
        $.ajax({
            url:'',
            dataType:'json',
            success:r=>{
                resolve(r);
            }，
            error:err=>{
                reject(err);
            }
        });
    });

    pro.then(成功的回調寝殴，失敗的回調);
    pro.then((r)=>{
        //r 成功后返回結果 蒿叠，處理成功的數(shù)據(jù)信息
    },(err)=>{
        //err  失敗對象，處理失敗信息
    });

2）用法 —— 常規(guī)用法
    Promise.all();
    批量處理異步請求蚣常，統(tǒng)一處理成功的回調
    Promise.all([
        //請求1 的 Promise
        //請求2 的 Promise
    ]).then(成功回調市咽，失敗回調);
    全部成功才算成功，有一個失敗就是整體失敗抵蚊。

Promise

1）基本用法施绎，發(fā)一個請求
    new Promise((resolve,reject)=>{
        $.ajax({
            url:
            dataType:
            success(r){
                resolve(r);
            },
            error(err){
                reject(err);
            }
        });
    }).then((r)=>{
        //成功了
    },(e)=>{
        //失敗了
    });

2）Promise.all()
    Promise.all([
        //發(fā)請求的Promise對象
        new Promise(),
        new Promise(),
        ....
    ]).then(r=>{
        //以上數(shù)組中，指定的所有的請求贞绳，全部都成功谷醉，才是成功
    },err=>{
        //以上數(shù)組中，指定的所有的請求冈闭，只要有一個失敗俱尼，就是失敗
    });

3）發(fā)現(xiàn) jquery 的 $.ajax 返回值，返回一個Promise對象
    Promise.all([
        $.ajax({url:'1',dataType:'json'}),
        $.ajax({url:'2',dataType:'json'}),
        $.ajax({url:'3',dataType:'json'}),
    ]).then(r=>{
        //r : 數(shù)組拒秘，多次請求返回結果的數(shù)組
        //單獨處理每次請求的結果
        let [arr1,arr2,arr3] = r;
        console.log(arr1); —— 第一個請求的返回值 
        ...
    },err=>{});
4）
   Promise.race([
      $.ajax(),
      $.ajax()....
    ]).then(r=>{
        r —— 以上所有的請求号显，最快的那個
    },err=>{});

怎么知道一個變量發(fā)生了改變？

1.添加一個方法(set()) 設置變量的值 set 被調用時候 比較一下
2.一般臟檢查躺酒，將對象復制一份快照押蚤，在某個時間  比較現(xiàn)在對象與快照的值
       如果不一樣就表明發(fā)生變化 這個策略要保留兩份變量 而且要遍歷對象
       比較屬性 這樣會有 一定性能問題
3.它的策略
        1.不會臟檢查所有對象  當對象被綁定到html中 這個對象添加為檢查對象
        2.不會臟檢查所有的屬性，同樣當屬性被綁定后 這個屬性會被列為檢查的屬性
        在它初始化時 會將綁定的對象的屬性添加為監(jiān)聽對象 也就是說一個對象綁定N個屬性
        就會添加N個watcher (意思是  綁定一個name屬性 然后n個地方用  就會添加n個watcher)羹应；
什么時候去臟檢查
    angular所系統(tǒng)的方法中都會觸發(fā)比較事件    
    比如：controller初始化的時候 所有ng-開頭的事件執(zhí)行后 都會觸發(fā)臟檢查

不要在conroller中做以下事情

    1.不要在controller中做DOM操作  大大影響了應用邏輯的可測試性  可以把表現(xiàn)邏輯抽取到directive(指令中)揽碘；
    2.輸入格式化  使用angular form controls代替 (去看)
    3.輸出格式化  使用angular filter 代替
    4.執(zhí)行無狀態(tài)或者有狀態(tài)的、controller共享的代碼  angular service(去看)代替

在Angular 中使用 Promise:

1园匹、angular中雳刺，使用原生的 Promise，出問題了
  在then里處理數(shù)據(jù)的時候裸违，$scope.nums = arr1 生效掖桦，但是頁面無法使用
2、angular 自己提供了一個  Promise供汛， 
新的依賴項：   $q 

jQuery Ajax另幾種寫法：
  1枪汪、$.get('data/a.txt',{a:1},r=>{
        console.log(typeof r);
    });
    返回值是string類型
  2涌穆、$.post('data/a.txt',{a:1},r=>{
        console.log(typeof r);
    });
    返回值是string類型
  3、$.getJSON().....
    返回值是 json 對象
Angular和其它庫或原生的很多東西不通用：
1） $.ajax           jquery
2） Promise      原生   $q
3）定時器
原理：因為函數(shù)雀久，在Angular中宿稀，它認為所有的東西都應該出現(xiàn)在自己的controller函數(shù)里，
                對于其它地方回調函數(shù)里的值的處理赖捌，不認
定時器：
$interval
$timeout
解決以上問題的另外一個方法：
$scope.$apply();
——通俗地說： 告訴祝沸、通知 Angular ， 來看一下數(shù)據(jù)是不是變了

一越庇、模塊化

Angular中的模塊化 —— 比較弱
let mod = angular.module('mod',[]);
例1：
    1） 在一個新的JS文件里定義了一個模塊
        let mod1 = angular.module('mod1',[]);
        mod1.controller('mod1_ctr1',($scope)=>{
            $scope.a = 200;
        });
    2）在我的html文件中罩锐，自身的模塊依賴于以上定義的模塊： mod1
    3）在html文件中，可以同時使用自己的controlloer和模塊中的controller：mod1_ctr1

二悦荒、依賴注入

把決定權交給消費者唯欣。
函數(shù)參數(shù)：由調用者來決定 —— 被動的地位
    function show(a,b){
        alert(arguments.length);
    }
Angular：函數(shù)的拯救者

let mod = .....;
mod.controller('ctr1',($scope,$q)=>{
    $scope.a=12;
});
想用誰，就把誰注入到函數(shù)搬味。

三境氢、過濾器

系統(tǒng)的過濾器： date  currency
    time|date:'yyyy-MM-dd'
    price|currency  —— $
        |currency:'￥' —— ￥
要求：
    給定一個數(shù)字，顯示一下是中文的星期幾碰纬。
    let n = 3;
    {{n|cnDay}} —— 星期三

自定義過濾器：
angular.module('app',[])
.filter('cnDay',function(){
    return function(input){
        //input 就是要處理的輸入的數(shù)據(jù)
        //輸入的數(shù)據(jù)——要對誰使用這個過濾器
        //對input進行處理
        return '返回值——就是最終要使用的內容';
    };
});

四萍聊、自定義指令

指令： ng-bind ng-model....
  以ng-開頭的都是系統(tǒng)提供的指令

自定義一個指令：hehe-haha
angular.module('myapp',[])
.directive('heheHaha',()=>{
    return {
        template:'<span>歡迎你</span>'
    };
})
指令名稱：
  駝峰命名法：  第一個字母小寫，以后每個單詞首字母大寫
限制選項：restrict —— 默認值 A E
restrict：字符串
    A:  Attribute       屬性
    E:  Element     元素
    C:  Class       類悦析，樣式中的class
    M:  coMment 注釋 ： 需要配合 replace:true
        ***M的時候  兩邊要留空格
自定義指令中常用的幾個選項：
template：   輸出的模板
restrict:       限制寿桨、約束
    ECMA
replace:        默認是false，
                設置true强戴，替換原有的標簽