JoeyGo23/api.cfm

## api.cfm
<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' )#"
	/>

## jsonp-demo.htm
<!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>
	<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' )#"
	/>
	<!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>