The JSONP in angular

Source: Internet
Author: User
Tags script tag

1, generally we use ANGUALR in the JSONP value of this use: Inject $http service
This way you can use JSONP to support most APIs, but Douban does not support the inability to use
1Module.controller (' Intheaterscontroller ', [' $scope ', ' $http ',function($scope, $http) {2 4 vardoubanapiaddress = ' Https://api.douban.com/v2/movie/in_theaters ';5 6/!* using the JSONP service in ANGUALR must be appended to the current address7* One parameter CALLBACK (this name is not fixed) = ' json_callback ', angular will replace this with a random function name * *!/8 9$http. Jsonp (doubanapiaddress+ ' Callback=json_callback '). Then (function(res) {Ten Console.log (res); One if(Res.status = = 200){ A$scope. Subjects =res.data.subjects; -}Else{ -$scope. Message = ' Oops, it failed to get the data! ' +Res.statustext; the } -},function(err) { -$scope. Message = ' Oops, failed to get data 2! ' +Err.statustext; - }) +}]);

So we have to write a JSONP service to replace the JSONP service in angular.

1 /*2 write a convenient cross-domain service in this component to make it easier for other modules to use3 4 because the default ANGUALR provides an asynchronous request object that does not support a custom function name5 the angular randomly assigned callback function Douban does not support6 */7 8' Use strict ';9(function(angular) {Ten  One     varhttp = angular.module (' myApp.services.http ',[]); A  -Http.service (' Httpservice ', [' $window ', ' $document ',function($window, $document) { -  the         //Url:https://api.douban.com/v2/movie/in_theaters placed in <script> and placed in HTML -          This. Jsonp =function(URL, data, callback) { -             //1. Handling callback parameters in URL addresses -             //2. Create a script tag +             //3, mount the callback function, put in the global scope for the time of the callback execution -             //4. Place the script in HTML +  A             varCbfuncname = ' my_json_cb_ ' + math.random (). toString (). replace ('. ', '); at             //not recommended, we recommend the way to angular -$window [Cbfuncname] = callback;//$window is the Window object -  -             varQueryString = Url.indexof ('? ') = =-1? '? ': ' & '; -              for(varKeyinchdata) { -QueryString + = key + ' = ' + Data[key] + ' & '; in             } -  toQueryString + = ' callback= ' +Cbfuncname; +  -             //the Document object is an array member of the $document object the             varScriptElement = $document [0].createelement (' script ')); *SCRIPTELEMENT.SRC = URL +querystring; $$document [0].body.appendchild (scriptelement);Panax Notoginseng         } -         //$window. $jsonp = Jsonp; the     }]) +}) (angular)

This allows us to rely on myApp.services.http in the module and inject the Httpservice service to use the



The JSONP in angular

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.