bennadel · April 21, 2014 16:52
diff --git a/http-angularjs.htm b/http-angularjs.htm
 <!doctype html>
 <html ng-app="Demo">
 <head>
 	<meta charset="utf-8" />

 	<title>
 		Using The $http Service In AngularJS To Make AJAX Requests
 	</title>

 	<style type="text/css">

 		a[ ng-click ] {
 			color: #FF00CC ;
 			cursor: pointer ;
 			text-decoration: underline ;
 		}

 	</style>
 </head>
 <body ng-controller="DemoController">

 	<h1>
 		Using The $http Service In AngularJS To Make AJAX Requests
 	</h1>

 	<!-- Show existing friends. -->
 	<ul>
 		<li ng-repeat="friend in friends">

 			{{ friend.name }}

 			( <a ng-click="removeFriend( friend )">delete</a> )

 		</li>
 	</ul>

 	<!-- Add a new friend to the list. -->
 	<form ng-submit="addFriend()">

 		<input type="text" ng-model="form.name" size="20" />
 		<input type="submit" value="Add Friend" />

 	</form>


 	<!-- Initialize scripts. -->
 	<script type="text/javascript" src="../../jquery/jquery-2.1.0.min.js"></script>
 	<script type="text/javascript" src="../../angularjs/angular-1.2.4.min.js"></script>
 	<script type="text/javascript">

 		// Define the module for our AngularJS application.
 		var app = angular.module( "Demo", [] );


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I control the main demo.
 		app.controller(
 			"DemoController",
 			function( $scope, friendService ) {

 				// I contain the list of friends to be rendered.
 				$scope.friends = [];

 				// I contain the ngModel values for form interaction.
 				$scope.form = {
 					name: ""
 				};

 				loadRemoteData();


 				// ---
 				// PUBLIC METHODS.
 				// ---


 				// I process the add-friend form.
 				$scope.addFriend = function() {

 					// If the data we provide is invalid, the promise will be rejected,
 					// at which point we can tell the user that something went wrong. In
 					// this case, I'm just logging to the console to keep things very
 					// simple for the demo.
 					friendService.addFriend( $scope.form.name )
 						.then(
 							loadRemoteData,
 							function( errorMessage ) {

 								console.warn( errorMessage );

 							}
 						)
 					;

 					// Reset the form once values have been consumed.
 					$scope.form.name = "";

 				};


 				// I remove the given friend from the current collection.
 				$scope.removeFriend = function( friend ) {

 					// Rather than doing anything clever on the client-side, I'm just
 					// going to reload the remote data.
 					friendService.removeFriend( friend.id )
 						.then( loadRemoteData )
 					;

 				};


 				// ---
 				// PRIVATE METHODS.
 				// ---


 				// I apply the remote data to the local scope.
 				function applyRemoteData( newFriends ) {

 					$scope.friends = newFriends;

 				}


 				// I load the remote data from the server.
 				function loadRemoteData() {

 					// The friendService returns a promise.
 					friendService.getFriends()
 						.then(
 							function( friends ) {

 								applyRemoteData( friends );

 							}
 						)
 					;

 				}

 			}
 		);


 		// -------------------------------------------------- //
 		// -------------------------------------------------- //


 		// I act a repository for the remote friend collection.
 		app.service(
 			"friendService",
 			function( $http, $q ) {

 				// Return public API.
 				return({
 					addFriend: addFriend,
 					getFriends: getFriends,
 					removeFriend: removeFriend
 				});


 				// ---
 				// PUBLIC METHODS.
 				// ---


 				// I add a friend with the given name to the remote collection.
 				function addFriend( name ) {

 					var request = $http({
 						method: "post",
 						url: "api/index.cfm",
 						params: {
 							action: "add"
 						},
 						data: {
 							name: name
 						}
 					});

 					return( request.then( handleSuccess, handleError ) );

 				}


 				// I get all of the friends in the remote collection.
 				function getFriends() {

 					var request = $http({
 						method: "get",
 						url: "api/index.cfm",
 						params: {
 							action: "get"
 						}
 					});

 					return( request.then( handleSuccess, handleError ) );

 				}


 				// I remove the friend with the given ID from the remote collection.
 				function removeFriend( id ) {

 					var request = $http({
 						method: "delete",
 						url: "api/index.cfm",
 						params: {
 							action: "delete"
 						},
 						data: {
 							id: id
 						}
 					});

 					return( request.then( handleSuccess, handleError ) );

 				}


 				// ---
 				// PRIVATE METHODS.
 				// ---


 				// I transform the error response, unwrapping the application dta from
 				// the API response payload.
 				function handleError( response ) {

 					// The API response from the server should be returned in a
 					// nomralized format. However, if the request was not handled by the
 					// server (or what not handles properly - ex. server error), then we
 					// may have to normalize it on our end, as best we can.
 					if (
 						! angular.isObject( response.data ) ||
 						! response.data.message
 						) {

 						return( $q.reject( "An unknown error occurred." ) );

 					}

 					// Otherwise, use expected error message.
 					return( $q.reject( response.data.message ) );

 				}


 				// I transform the successful response, unwrapping the application data
 				// from the API response payload.
 				function handleSuccess( response ) {

 					return( response.data );

 				}

 			}
 		);

 	</script>

 </body>
 </html>
	<!doctype html>
	<html ng-app="Demo">
	<head>
	<meta charset="utf-8" />

	<title>
	Using The $http Service In AngularJS To Make AJAX Requests
	</title>

	<style type="text/css">

	a[ ng-click ] {
	color: #FF00CC ;
	cursor: pointer ;
	text-decoration: underline ;
	}

	</style>
	</head>
	<body ng-controller="DemoController">

	<h1>
	Using The $http Service In AngularJS To Make AJAX Requests
	</h1>

	<!-- Show existing friends. -->
	<ul>
	<li ng-repeat="friend in friends">

	{{ friend.name }}

	( <a ng-click="removeFriend( friend )">delete</a> )

	</li>
	</ul>

	<!-- Add a new friend to the list. -->
	<form ng-submit="addFriend()">

	<input type="text" ng-model="form.name" size="20" />
	<input type="submit" value="Add Friend" />

	</form>


	<!-- Initialize scripts. -->
	<script type="text/javascript" src="../../jquery/jquery-2.1.0.min.js"></script>
	<script type="text/javascript" src="../../angularjs/angular-1.2.4.min.js"></script>
	<script type="text/javascript">

	// Define the module for our AngularJS application.
	var app = angular.module( "Demo", [] );


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I control the main demo.
	app.controller(
	"DemoController",
	function( $scope, friendService ) {

	// I contain the list of friends to be rendered.
	$scope.friends = [];

	// I contain the ngModel values for form interaction.
	$scope.form = {
	name: ""
	};

	loadRemoteData();


	// ---
	// PUBLIC METHODS.
	// ---


	// I process the add-friend form.
	$scope.addFriend = function() {

	// If the data we provide is invalid, the promise will be rejected,
	// at which point we can tell the user that something went wrong. In
	// this case, I'm just logging to the console to keep things very
	// simple for the demo.
	friendService.addFriend( $scope.form.name )
	.then(
	loadRemoteData,
	function( errorMessage ) {

	console.warn( errorMessage );

	}
	)
	;

	// Reset the form once values have been consumed.
	$scope.form.name = "";

	};


	// I remove the given friend from the current collection.
	$scope.removeFriend = function( friend ) {

	// Rather than doing anything clever on the client-side, I'm just
	// going to reload the remote data.
	friendService.removeFriend( friend.id )
	.then( loadRemoteData )
	;

	};


	// ---
	// PRIVATE METHODS.
	// ---


	// I apply the remote data to the local scope.
	function applyRemoteData( newFriends ) {

	$scope.friends = newFriends;

	}


	// I load the remote data from the server.
	function loadRemoteData() {

	// The friendService returns a promise.
	friendService.getFriends()
	.then(
	function( friends ) {

	applyRemoteData( friends );

	}
	)
	;

	}

	}
	);


	// -------------------------------------------------- //
	// -------------------------------------------------- //


	// I act a repository for the remote friend collection.
	app.service(
	"friendService",
	function( $http, $q ) {

	// Return public API.
	return({
	addFriend: addFriend,
	getFriends: getFriends,
	removeFriend: removeFriend
	});


	// ---
	// PUBLIC METHODS.
	// ---


	// I add a friend with the given name to the remote collection.
	function addFriend( name ) {

	var request = $http({
	method: "post",
	url: "api/index.cfm",
	params: {
	action: "add"
	},
	data: {
	name: name
	}
	});

	return( request.then( handleSuccess, handleError ) );

	}


	// I get all of the friends in the remote collection.
	function getFriends() {

	var request = $http({
	method: "get",
	url: "api/index.cfm",
	params: {
	action: "get"
	}
	});

	return( request.then( handleSuccess, handleError ) );

	}


	// I remove the friend with the given ID from the remote collection.
	function removeFriend( id ) {

	var request = $http({
	method: "delete",
	url: "api/index.cfm",
	params: {
	action: "delete"
	},
	data: {
	id: id
	}
	});

	return( request.then( handleSuccess, handleError ) );

	}


	// ---
	// PRIVATE METHODS.
	// ---


	// I transform the error response, unwrapping the application dta from
	// the API response payload.
	function handleError( response ) {

	// The API response from the server should be returned in a
	// nomralized format. However, if the request was not handled by the
	// server (or what not handles properly - ex. server error), then we
	// may have to normalize it on our end, as best we can.
	if (
	! angular.isObject( response.data ) \|\|
	! response.data.message
	) {

	return( $q.reject( "An unknown error occurred." ) );

	}

	// Otherwise, use expected error message.
	return( $q.reject( response.data.message ) );

	}


	// I transform the successful response, unwrapping the application data
	// from the API response payload.
	function handleSuccess( response ) {

	return( response.data );

	}

	}
	);

	</script>

	</body>
	</html>