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的名字。