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.分工
**學(xué)好:它最核心的核心的東西就是數(shù)據(jù) 

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

基本用法：

Angular指令：
以 ng 開頭。
是否需要服務(wù)器環(huán)境——最好
oninput是input值改變的時(shí)候觸發(fā)
1、ng-app
  angular管轄的范圍
2、ng-model
  數(shù)據(jù)，數(shù)據(jù)模型——  數(shù)據(jù)從哪來
3、ng-bind
  數(shù)據(jù)綁定 —— 數(shù)據(jù)到哪去
4、表達(dá)式{{a}}
  *Angular 和 原生的JS——不互通（事件、函數(shù)），可以解決。
5、ng-click
  事件：  ng-mouseover  ....
  * 只關(guān)注數(shù)據(jù)
6、ng-init
  數(shù)據(jù)初始化
7、ng-repeat  循環(huán) 
  循環(huán)數(shù)組：
    ng-repeat="item in arr" 
        {{item}}  —— 數(shù)組中的每一項(xiàng)
  循環(huán)JSON：
    ng-repeat="(key,value) in json"
        {{key}} —— json中的key 
        {{value}} —— json中的value
8、數(shù)組的索引：  $index  獲取本元素的索引
  *在數(shù)組里，默認(rèn)情況下不允許出現(xiàn)重復(fù)的數(shù)字 如果有重復(fù)的會報(bào)錯(cuò)
    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:  不好 一開始清空內(nèi)容
    *Angular——接管了 UI
    *Angular——擴(kuò)展了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中可以使用原生代碼
*一個(gè)頁面中，可以有多個(gè)模塊
*在一個(gè)模塊中，可以有多個(gè)控制器
*為什么不互通：因?yàn)閍ngular的東西都在$scope身上。

控制器： Controller

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

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

$scope ：  依賴項(xiàng)

交互:

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

因?yàn)椋簽g覽器不認(rèn)識 ng-src

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

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

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

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

  $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
  回調(diào)函數(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(成功的回調(diào)，失敗的回調(diào));
    pro.then((r)=>{
        //r 成功后返回結(jié)果 ，處理成功的數(shù)據(jù)信息
    },(err)=>{
        //err  失敗對象，處理失敗信息
    });

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

Promise

1）基本用法，發(fā)一個(gè)請求
    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ù)組中，指定的所有的請求，只要有一個(gè)失敗，就是失敗
    });

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

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

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

不要在conroller中做以下事情

    1.不要在controller中做DOM操作  大大影響了應(yīng)用邏輯的可測試性  可以把表現(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ù)的時(shí)候，$scope.nums = arr1 生效，但是頁面無法使用
2、angular 自己提供了一個(gè)  Promise， 
新的依賴項(xiàng)：   $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í)器
原理：因?yàn)楹瘮?shù)，在Angular中，它認(rèn)為所有的東西都應(yīng)該出現(xiàn)在自己的controller函數(shù)里，
                對于其它地方回調(diào)函數(shù)里的值的處理，不認(rèn)
定時(shí)器：
$interval
$timeout
解決以上問題的另外一個(gè)方法：
$scope.$apply();
——通俗地說： 告訴、通知 Angular ， 來看一下數(shù)據(jù)是不是變了

一、模塊化

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

二、依賴注入

把決定權(quán)交給消費(fèi)者。
函數(shù)參數(shù)：由調(diào)用者來決定 —— 被動的地位
    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:'￥' —— ￥
要求：
    給定一個(gè)數(shù)字，顯示一下是中文的星期幾。
    let n = 3;
    {{n|cnDay}} —— 星期三

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

四、自定義指令

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

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