angular中封装好的jsonp跨域

1.

    (function(angular){
  // 1.创建模块
 var app = angular.module('myJsonpService', [])

 // 2.创建服务
 app.service('MyService',['$window',function($window){
this.jsonp = function(url, arg, fn){
    // 1.创建script标签
    var scrip = $window.document.createElement('script')
    // 2.设置src属性值
    // 2.1 拼接url及arg
    // arg {}  ?a=b&c=22
    var querystring = ''
    for(var key in arg){
      querystring += key+'='+ arg[key] +'&'
    }
    var funcName = 'myJsonp'+ $window.Math.random().toString().substr(2)    // 0.232
    url += '?' + querystring +'callback='+funcName
    

    $window[funcName] = function(data){
      fn(data)
    }
    // window.testFunc = function(data){
    //    // 2.5 当前数据返回时，调用 fn
    //   fn(data)
    // }

    scrip.src = url
   
    // 3.把script标签添加到dom上去
    $window.document.body.appendChild(scrip)
  }
 }])
})(angular)

1.2使用创建好的jsonp发送请求

  MyService.jsonp('http://api.douban.com/v2/movie/'+$routeParams.movieType,
      {start:start,count:$scope.pageSize,q:$routeParams.q},function(data){
        $scope.data = data // 在异步给数据模型赋值，angular不会知道

        // 根据总条数及每页大小计算出总页数
        $scope.totalPage = Math.ceil($scope.data.total/$scope.pageSize)
    $scope.loading = false // 让加载动画消失
    // 通过angular我们已经改变了数据模型的值了
    $scope.$apply()// 会把$scope的属性值重新渲染到页面。
  })

2.

    // 创建一个jsonp服务
 (function(angular){
// 创建模块
var app = angular.module('moviecat.myjsonp',[]);
// 创建服务
app.service('MyJsonp',['$window',function($window){
    this.jsonp=function crossDomain(url,arg,fn){
        //{name:1,age:2}
        // 1.拼接地址
        var queryString = '';
        //?name=1&age=2
        for(var key in arg){
            queryString+= key+'='+arg[key]+'&'
        }
        url +='?'+queryString;
        //创建一个有名字的回调函数
        var callbackName="jsonp_"+Math.random().toString().substr(2);
        $window[callbackName]=function(data){
            fn(data);
        }
        url +='callback='+callbackName;
        // 2.创建script标签，并设置src属性
        var scriptElement = $window.document.createElement('script');
        scriptElement.src=url;
        $window.document.body.appendChild(scriptElement);
    }
  }])
  })(angular)

2.2使用创建好的jsonp发送请求

  // 使用自己封装的jsonp进行跨域请求
  $scope.loading=true;// 控制加载动画的显示与否
  $scope.pageSize=5;// 每页请求的数据
 $scope.nowPage= ($routeParams.page||"1") - 0;// 当前的页码
 // nowPage 1  ,start 0 ,0,1,2,3,4
 // nowPage 2  ,start 5  ,5,6,7,8,9
 // nowPage 3  ,start 10
var start = ($scope.nowPage - 1)*$scope.pageSize;
// console.log(start);
 MyJsonp.jsonp('http://api.douban.com/v2/movie/'+$routeParams.movieType+'?q='+$routeParams.q,
    {start:start,count:$scope.pageSize},function(data){
        // angular不能够监视异步操作中对数据模型的改变
        $scope.data=data;  // 10/5, 9/5 ,11/5
        $scope.total=data.total;
        $scope.totalPage=  Math.ceil(data.total/$scope.pageSize);
        $scope.loading=false;
        $scope.$apply();//在改变数据模型之后调用,强制angular监视数据模型的改变
    });