angular에서 봉인된 jsonp 크로스 필드

3078 단어

일.

    (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 。
  })

이.

    //  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 
    });

좋은 웹페이지 즐겨찾기