bennadel · April 17, 2014 11:59 · Apr 17, 2014
diff --git a/api.cfm b/api.cfm
@@ -0,0 +1,33 @@
+<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' )#"
+	/>
diff --git a/jsonp-demo.htm b/jsonp-demo.htm
@@ -0,0 +1,145 @@
+<!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>