bennadel/angularjs-post.htm

## angularjs-post.htm
<!doctype html>
<html ng-app="Demo">
<head>
	<meta charset="utf-8" />

	<title>
		Parsing AngularJS Request Data On The Server Using ColdFusion
	</title>
</head>
<body ng-controller="DemoController">

	<h1>
		Parsing AngularJS Request Data On The Server Using ColdFusion
	</h1>

	<!-- For each type of HTTP method, output the echoed result. -->
	<div ng-repeat="dump in cfdumps">

		<h3>
			{{ dump.method }}
		</h3>

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

	</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 ) {

				// I hold the data-dumps of the FORM scope from the server-side.
				$scope.cfdumps = [];

				// Make an HTTP request for each type of verb.
				angular.forEach( [ "get", "post", "put", "delete" ], makeRequest );


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


				// I post data to the API using the given method type.
				function makeRequest( method ) {

					// AngularJS will try to work with ANY type of data that you pass
					// in the "data" property. However, I try to ALWAYS pass an object
					// with key-value pairs as I find that this makes the data easier
					// to consume on the server.
					var request = $http({
						method: method,
						url: "echo.cfm",
						data: {
							id: 4,
							name: "Kim",
							status: "Best Friend"
						}
					});

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

							$scope.cfdumps.push({
								method: method.toUpperCase(),
								html: html
							});

						}
					);

				}

			}
		);


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


		// 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>

## echo.cfm
<cfscript>

	// Since we need to deserialize and consume the incoming request, there are a number
	// of things that can go wrong.
	try {

		requestBody = toString( getHttpRequestData().content );

		// Not every type of request will have a "body" (ex, "GET"). But, for this demo,
		// we're going to assume the body, if it exists, will always be an object. I find
		// an object easier to work with - I never let the client pass in a simple value
		// or an array.
		if ( len( requestBody ) ) {

			structAppend( form, deserializeJson( requestBody ) );

		}

	} catch ( any error ) {

		// The incoming request data was either not JSON or was not an "object". A this
		// point, you might want to throw a custom error; or, you might want to let the
		// request continue and defer processing logic to some controller.
		// --
		// throw( type = "BadRequest" );

	}

	// Echo the state of the Form scope (output on the client).
	writeDump( var = form, label = "Form Scope" );

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

	<title>
	Parsing AngularJS Request Data On The Server Using ColdFusion
	</title>
	</head>
	<body ng-controller="DemoController">

	<h1>
	Parsing AngularJS Request Data On The Server Using ColdFusion
	</h1>

	<!-- For each type of HTTP method, output the echoed result. -->
	<div ng-repeat="dump in cfdumps">

	<h3>
	{{ dump.method }}
	</h3>

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

	</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 ) {

	// I hold the data-dumps of the FORM scope from the server-side.
	$scope.cfdumps = [];

	// Make an HTTP request for each type of verb.
	angular.forEach( [ "get", "post", "put", "delete" ], makeRequest );


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


	// I post data to the API using the given method type.
	function makeRequest( method ) {

	// AngularJS will try to work with ANY type of data that you pass
	// in the "data" property. However, I try to ALWAYS pass an object
	// with key-value pairs as I find that this makes the data easier
	// to consume on the server.
	var request = $http({
	method: method,
	url: "echo.cfm",
	data: {
	id: 4,
	name: "Kim",
	status: "Best Friend"
	}
	});

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

	$scope.cfdumps.push({
	method: method.toUpperCase(),
	html: html
	});

	}
	);

	}

	}
	);


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


	// 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>
	<cfscript>

	// Since we need to deserialize and consume the incoming request, there are a number
	// of things that can go wrong.
	try {

	requestBody = toString( getHttpRequestData().content );

	// Not every type of request will have a "body" (ex, "GET"). But, for this demo,
	// we're going to assume the body, if it exists, will always be an object. I find
	// an object easier to work with - I never let the client pass in a simple value
	// or an array.
	if ( len( requestBody ) ) {

	structAppend( form, deserializeJson( requestBody ) );

	}

	} catch ( any error ) {

	// The incoming request data was either not JSON or was not an "object". A this
	// point, you might want to throw a custom error; or, you might want to let the
	// request continue and defer processing logic to some controller.
	// --
	// throw( type = "BadRequest" );

	}

	// Echo the state of the Form scope (output on the client).
	writeDump( var = form, label = "Form Scope" );

	</cfscript>