ANGULARJS Study Notes (i)-----JSONP cross-site access

1, download the Angular-seed-master-master package, unzip the new version of the Angularjs file into it.

2, make Frontmockup folder (front-end call), while making Backmockup folder (back-end call), using IIS to open 2 webserver (this step can be replaced in other ways).

3. Add the following HTTP headers to the Backmockup site

Access-control-allow-credentials:true

Access-control-allow-headers:origin,x-requested-with,content-type

Access-control-allow-methods:post,get,options

access-control-allow-origin:*

(This is used to turn on cross-domain access, which is added in IIS in the HTTP response header)

4, AngularJs cross-domain access using $resource JSONP technology, the code is as follows

. Service (' Jsonsource ', [' $resource ', function ($resource) {

Return $resource (' http://127.0.0.1:801/index.asp ', {}, {init:{method: ' JSONP ', Format: ' JSON ', Params:{callback: ' JSON _callback '},isarray:true}});

}])

Where the Init method is custom, because it needs to use method: ' JSONP ', so can not use GET, query and other methods, the array is set directly with IsArray.

Params:{callback: ' Json_callback ' is a key point, Json_callback is a system method that generates a self-growth ID to match the client with <%=request ("callback")% > Way to get, and output

Angular.callbacks._0 (

[{"Name": "Angular.callbacks._0", "journal_id": "539016f202b418c1e6000019"}])

The original form of this method is CALLBACK: ' Json_callback ', does not use the params, because the request can not be used to obtain parameters, do not know how to configure the server side, theoretically this option is more secure.

5, the data read call Jsonsource init method

function ($scope, Jsonsource) {

Jsonsource.init (function (result) {

$scope. Journals = result;

});

}

Loop output via ng-repeat= "journal in Journals"

6, cross-site access to complete the function, organized into compressed file angularjs-0.0-20140610-jsonp.zip.