Angular.js淺談

至今博主對於MVVM框架比較瞭解的就只能算有Angular了，首先給你們明確一個概念，Angular1.x才能叫Angular.js，而Angular二、四、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的名字。