至今博主對於MVVM框架比較了解的就只能算有Angular了，首先給大家明確一個概念，Angular1.x才能叫Angular.js，而Angular2、4、5都直接叫Angular了，因為從2開始已經是用TypeScript開發的了，不能再稱它為js框架，值得肯定的是Ng2比Ng1.x的確更強大，更加規範，開發出來的應用的性能也相對變強了些，不過Ng2的太過激進的變動使得框架使用復雜度變大，1.x的用戶相當於要重新學習一種開發模式，用戶流失嚴重。

今天呢，我不在這裏做具體的功能介紹，這些沒什麽意思，就說一下Angular.js的優缺點吧~

優點：

首先Angular.js是前端三大框架最早出來的，這意味著它是前端這類框架創始的始祖，這個歷史地位還是值得我們尊重的。

1.它創新性地做出了雙向綁定的開發方式，{{}}這種寫法就是Angular率先提出的，這種可以雙向綁定js裏面的“變量”和HTML的數據顯示（這樣不需要我們再去自己操作dom，就可以更新頁面）

2.實現了依賴註入（依賴反轉，由函數來決定要什麽依賴）

缺點：

由於Angular太早出現，一些核心的代碼還是過於陳舊，從而有一些Vue、React沒有的Bug

1.事件、賦值、ng-repeat不能同時使用

<input type="button" ng-click="now=$index" ng-repeat="(k,v) in json" value="{{k}}">

以上會使得$scope.now無法賦值成功，這當然不是我們的問題，Vue，React，Ng2+都不會出現這種問題，要解決這個問題，我們要換一種寫法：

<input type="button"  ng-click="setIndex($index)" ng-repeat="(k,v) in json" value="{{k}}">

調用函數在函數內部完成賦值的工作。

2.異步數據不會自動同步

由於Angular1.x的雙向綁定依然使用舊的“臟檢查”，而不是新的Observation,如果我們自己寫異步獲取數據，或者其他庫的異步獲取數據（例如JQ的$.ajax({})）,異步修改$scope上的數據，HTML上是無法自動更新的，我們需要在修改後，手動調用一次$scope.$apply()，當然我們可以使用Angular提供的$http，就可以不用寫手動觸發臟檢查了。

3.$http.post的Content-Type

Angular $http.post模塊默認設置的Header[‘Content-Type‘]，居然是application/json，這個是大部分服務器不認，傳統的服務器認的是application/x-www-form-urlencoded

所以我們還要把默認設置自己給設置一遍：

angular.module(‘common‘,[]).config(function($httpProvider){
  $httpProvider.defaults.transformRequest=function(data){
    let temp = [];
    for(i in data){
      temp.push(encodeURIComponent(i)+‘=‘+encodeURIComponent(data[i]));
    }
    return temp.join(‘&‘);
  }
 $httpProvider.defaults.headers.post[‘Content-Type‘]=‘application/x-www-form-urlencoded‘;
})

我們要設置好transformRequest(數據傳出前的格式轉換)和headers.post[‘Content-Type‘]（數據格式是哪種），設置好了之後我們之後寫module的時候直接引入依賴就可以了：

angular.module(‘test1‘,[‘common‘]);

4.$http.jsonp 麻煩

let mod = angular.module(‘test‘,[]);
mod.controller(‘test_c‘,function($scope,$http,$sce){
    $scope.arr=[];
    $scope.keyword="";
    $scope.$watch(‘keyword‘,function(){
      let url = $sce.trustAsResourceUrl(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.keyword}`);
      $http.jsonp(url,{jsonpCallbackParam:‘cb‘}).then(res=>{
          $scope.arr = res.data.s;
      },err=>{
          alert(‘錯了‘);
      });
    })
});

jsonp本來就是不安全的，但是感覺多此一舉的需要用$sce.trustAsResourceUrl包裹一下url，才能用{jsonpCallbackParam:‘cb‘}配置callback的名字。

Angular.js淺談