bennadel · April 23, 2014 11:43
diff --git a/angularjs-form-post.htm b/angularjs-form-post.htm
 <!doctype html>
 <html ng-app="Demo">
 <head>
 	<meta charset="utf-8" />

 	<title>
 		Posting Form Data With $http In AngularJS
 	</title>
 </head>
 <body ng-controller="DemoController">

 	<h1>
 		Posting Form Data With $http In AngularJS
 	</h1>

 	<div ng-bind-html="cfdump">
 		<!-- To be populated with the CFDump from the server. -->
 	</div>


 	<!-- 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, $http, transformRequestAsFormPost ) {

 				// I hold the data-dump of the FORM scope from the server-side.
 				$scope.cfdump = "";

 				// By default, the $http service will transform the outgoing request by
 				// serializing the data as JSON and then posting it with the content-
 				// type, "application/json". When we want to post the value as a FORM
 				// post, we need to change the serialization algorithm and post the data
 				// with the content-type, "application/x-www-form-urlencoded".
 				var request = $http({
 					method: "post",
 					url: "process.cfm",
 					transformRequest: transformRequestAsFormPost,
 					data: {
 						id: 4,
 						name: "Kim",
 						status: "Best Friend"
 					}
 				});

 				// Store the data-dump of the FORM scope.
 				request.success(
 					function( html ) {

 						$scope.cfdump = html;

 					}
 				);

 			}
 		);


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


 		// I provide a request-transformation method that is used to prepare the outgoing
 		// request as a FORM post instead of a JSON packet.
 		app.factory(
 			"transformRequestAsFormPost",
 			function() {

 				// I prepare the request data for the form post.
 				function transformRequest( data, getHeaders ) {

 					var headers = getHeaders();

 					headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

 					return( serializeData( data ) );

 				}


 				// Return the factory value.
 				return( transformRequest );


 				// ---
 				// PRVIATE METHODS.
 				// ---


 				// I serialize the given Object into a key-value pair string. This
 				// method expects an object and will default to the toString() method.
 				// --
 				// NOTE: This is an atered version of the jQuery.param() method which
 				// will serialize a data collection for Form posting.
 				// --
 				// https://github.com/jquery/jquery/blob/master/src/serialize.js#L45
 				function serializeData( data ) {

 					// If this is not an object, defer to native stringification.
 					if ( ! angular.isObject( data ) ) {

 						return( ( data == null ) ? "" : data.toString() );

 					}

 					var buffer = [];

 					// Serialize each key in the object.
 					for ( var name in data ) {

 						if ( ! data.hasOwnProperty( name ) ) {

 							continue;

 						}

 						var value = data[ name ];

 						buffer.push(
 							encodeURIComponent( name ) +
 							"=" +
 							encodeURIComponent( ( value == null ) ? "" : value )
 						);

 					}

 					// Serialize the buffer and clean it up for transportation.
 					var source = buffer
 						.join( "&" )
 						.replace( /%20/g, "+" )
 					;

 					return( source );

 				}

 			}
 		);


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


 		// I override the "expected" $sanitize service to simply allow the HTML to be
 		// output for the current demo.
 		// --
 		// NOTE: Do not use this version in production!! This is for development only.
 		app.value(
 			"$sanitize",
 			function( html ) {

 				return( html );

 			}
 		);

 	</script>

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

	<title>
	Posting Form Data With $http In AngularJS
	</title>
	</head>
	<body ng-controller="DemoController">

	<h1>
	Posting Form Data With $http In AngularJS
	</h1>

	<div ng-bind-html="cfdump">
	<!-- To be populated with the CFDump from the server. -->
	</div>


	<!-- 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, $http, transformRequestAsFormPost ) {

	// I hold the data-dump of the FORM scope from the server-side.
	$scope.cfdump = "";

	// By default, the $http service will transform the outgoing request by
	// serializing the data as JSON and then posting it with the content-
	// type, "application/json". When we want to post the value as a FORM
	// post, we need to change the serialization algorithm and post the data
	// with the content-type, "application/x-www-form-urlencoded".
	var request = $http({
	method: "post",
	url: "process.cfm",
	transformRequest: transformRequestAsFormPost,
	data: {
	id: 4,
	name: "Kim",
	status: "Best Friend"
	}
	});

	// Store the data-dump of the FORM scope.
	request.success(
	function( html ) {

	$scope.cfdump = html;

	}
	);

	}
	);


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


	// I provide a request-transformation method that is used to prepare the outgoing
	// request as a FORM post instead of a JSON packet.
	app.factory(
	"transformRequestAsFormPost",
	function() {

	// I prepare the request data for the form post.
	function transformRequest( data, getHeaders ) {

	var headers = getHeaders();

	headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";

	return( serializeData( data ) );

	}


	// Return the factory value.
	return( transformRequest );


	// ---
	// PRVIATE METHODS.
	// ---


	// I serialize the given Object into a key-value pair string. This
	// method expects an object and will default to the toString() method.
	// --
	// NOTE: This is an atered version of the jQuery.param() method which
	// will serialize a data collection for Form posting.
	// --
	// https://github.com/jquery/jquery/blob/master/src/serialize.js#L45
	function serializeData( data ) {

	// If this is not an object, defer to native stringification.
	if ( ! angular.isObject( data ) ) {

	return( ( data == null ) ? "" : data.toString() );

	}

	var buffer = [];

	// Serialize each key in the object.
	for ( var name in data ) {

	if ( ! data.hasOwnProperty( name ) ) {

	continue;

	}

	var value = data[ name ];

	buffer.push(
	encodeURIComponent( name ) +
	"=" +
	encodeURIComponent( ( value == null ) ? "" : value )
	);

	}

	// Serialize the buffer and clean it up for transportation.
	var source = buffer
	.join( "&" )
	.replace( /%20/g, "+" )
	;

	return( source );

	}

	}
	);


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


	// I override the "expected" $sanitize service to simply allow the HTML to be
	// output for the current demo.
	// --
	// NOTE: Do not use this version in production!! This is for development only.
	app.value(
	"$sanitize",
	function( html ) {

	return( html );

	}
	);

	</script>

	</body>
	</html>