Created
April 17, 2014 11:59
-
-
Save bennadel/10977643 to your computer and use it in GitHub Desktop.
Using JSONP With $resource In AngularJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<cfscript> | |
// I am the name of the JavaScript method to invoke with the response data. | |
param name="url.callback" type="string"; | |
// I am here to simulate HTTP latency (and to make the demo more interesting). | |
sleep( 1000 ); | |
data = [ | |
{ | |
"id" = 1, | |
"name" = "Kim" | |
}, | |
{ | |
"id" = 2, | |
"name" = "Heather" | |
}, | |
{ | |
"id" = 3, | |
"name" = "Tricia" | |
} | |
]; | |
// When serializing the data, create an actual line of JavaScript code: | |
response = "#url.callback#( #serializeJson( data )# )"; | |
</cfscript> | |
<!--- Reset the output buffer and return the byte array. ---> | |
<cfcontent | |
type="text/javascript; charset=utf-8" | |
variable="#charsetDecode( response, 'utf-8' )#" | |
/> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html ng-app="Demo"> | |
<head> | |
<meta charset="utf-8" /> | |
<title> | |
Using JSONP With $resource In AngularJS | |
</title> | |
<style type="text/css"> | |
a[ ng-click ] { | |
color: red ; | |
cursor: pointer ; | |
text-decoration: underline ; | |
} | |
</style> | |
</head> | |
<body ng-controller="DemoController"> | |
<h1> | |
Using JSONP With $resource In AngularJS | |
</h1> | |
<p> | |
I have the most awesome friends! | |
</p> | |
<!-- Show when data is loading. --> | |
<p ng-if="isLoading"> | |
<em>Loading data...</em> | |
</p> | |
<!-- Show when data has finished loading. --> | |
<div ng-if="! isLoading"> | |
<ul> | |
<li ng-repeat="friend in friends"> | |
{{ friend.name }} | |
</li> | |
</ul> | |
<p> | |
<a ng-click="refresh()">Refresh List</a> | |
</p> | |
</div> | |
<!-- Load scripts. --> | |
<script type="text/javascript" src="../jquery/jquery-2.1.0.min.js"></script> | |
<script type="text/javascript" src="../angular-1.2.16/angular.min.js"></script> | |
<script type="text/javascript" src="../angular-1.2.16/angular-resource.min.js"></script> | |
<script type="text/javascript"> | |
// Define our AnuglarJS module. | |
var app = angular.module( "Demo", [ "ngResource" ] ); | |
// -------------------------------------------------- // | |
// -------------------------------------------------- // | |
// I controll the demo. | |
app.controller( | |
"DemoController", | |
function( $scope, $resource ) { | |
// I determine if the page is currently in a loading state. | |
$scope.isLoading = false; | |
// I hold the list of friends to render. | |
$scope.friends = []; | |
// When defining the JSONP-oriented resource, you need to define the | |
// request such that it contains the string "JSON_CALLBACK". When you | |
// do this, AngularJS will replace said string on a per-request basis | |
// with a new and unique callback instance. | |
var resource = $resource( | |
"api.cfm", | |
{ | |
callback: "JSON_CALLBACK" | |
}, | |
{ | |
getFriends: { | |
method: "JSONP", | |
isArray: true | |
} | |
} | |
); | |
// Get the list of friends. | |
loadRemoteData(); | |
// --- | |
// PUBLIC METHODS. | |
// --- | |
// I re-request the data from the server (using JSONP). | |
$scope.refresh = function() { | |
loadRemoteData(); | |
}; | |
// --- | |
// PRIVATE METHODS. | |
// --- | |
// I load the remote data. | |
function loadRemoteData() { | |
$scope.isLoading = true; | |
resource.getFriends().$promise.then( | |
function( friends ) { | |
$scope.isLoading = false; | |
$scope.friends = friends; | |
}, | |
function( error ) { | |
// If something goes wrong with a JSONP request in AngularJS, | |
// the status code is always reported as a "0". As such, it's | |
// a bit of black-box, programmatically speaking. | |
alert( "Something went wrong!" ); | |
} | |
); | |
} | |
} | |
); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment