bennadel/async-alerts.htm

## async-alerts.htm
<!doctype html>
<html ng-app="Demo" ng-controller="AppController">
<head>
	<meta charset="utf-8" />

	<title>
		Creating Asynchronous Alerts, Prompts, And Confirms In AngularJS
	</title>
</head>
<body>

	<h1>
		Creating Asynchronous Alerts, Prompts, And Confirms In AngularJS
	</h1>

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

		// Create an application module for our demo.
		var app = angular.module( "Demo", [] );


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


		// I control the root of the application.
		app.controller(
			"AppController",
			function( $scope, alert, prompt, confirm ) {

				// Use new, injected alert.
				alert( "Hecks to the yea!" ).then(
					function() {

						console.log( "Alert accomplished" );

					}
				);


				// Use new, injected prompt.
				prompt( "Are you beginning to see the possibilities?", "Yes" ).then(
					function( response ) {

						console.log( "Prompt accomplished with", response );

					},
					function() {

						console.log( "Prompt failed :(" );

					}
				);


				// Use new, injected confirm.
				confirm( "Has it come to this?" ).then(
					function( response ) {

						console.log( "Confirm accomplished with", response );

					},
					function() {

						console.log( "Confirm failed :(" );

					}
				);


				// This last console.log is here to demonstrate that the asynchronous
				// alerts, prompts, and confirms will be rejected in a future tick of
				// the event loop and will invoke logging AFTER this line of code.
				console.log( "Testing completed." );

			}
		);


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


		// I define an asynchronous wrapper to the native alert() method. It returns a
		// promise that will be resolved in a future tick of the event loop.
		// --
		// NOTE: This promise will never be "rejected" since there is no divergent
		// behavior available to the user with the alert() method.
		app.factory(
			"alert",
			function( $window, $q ) {

				// Define promise-based alert() method.
				function alert( message ) {

					var defer = $q.defer();

					$window.alert( message );

					defer.resolve();

					return( defer.promise );

				}

				return( alert );

			}
		);


		// I define an asynchronous wrapper to the native prompt() method. It returns a
		// promise that will be "resolved" if the user submits the prompt; or will be
		// "rejected" if the user cancels the prompt.
		app.factory(
			"prompt",
			function( $window, $q ) {

				// Define promise-based prompt() method.
				function prompt( message, defaultValue ) {

					var defer = $q.defer();

					// The native prompt will return null or a string.
					var response = $window.prompt( message, defaultValue );

					if ( response === null ) {

						defer.reject();

					} else {

						defer.resolve( response );

					}

					return( defer.promise );

				}

				return( prompt );

			}
		);


		// I define an asynchronous wrapper to the native confirm() method. It returns a
		// promise that will be "resolved" if the user agrees to the confirmation; or
		// will be "rejected" if the user cancels the confirmation.
		app.factory(
			"confirm",
			function( $window, $q ) {

				// Define promise-based confirm() method.
				function confirm( message ) {

					var defer = $q.defer();

					// The native confirm will return a boolean.
					if ( $window.confirm( message ) ) {

						defer.resolve( true );

					} else {

						defer.reject( false );

					}

					return( defer.promise );

				}

				return( confirm );

			}
		);

	</script>

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

	<title>
	Creating Asynchronous Alerts, Prompts, And Confirms In AngularJS
	</title>
	</head>
	<body>

	<h1>
	Creating Asynchronous Alerts, Prompts, And Confirms In AngularJS
	</h1>

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

	// Create an application module for our demo.
	var app = angular.module( "Demo", [] );


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


	// I control the root of the application.
	app.controller(
	"AppController",
	function( $scope, alert, prompt, confirm ) {

	// Use new, injected alert.
	alert( "Hecks to the yea!" ).then(
	function() {

	console.log( "Alert accomplished" );

	}
	);


	// Use new, injected prompt.
	prompt( "Are you beginning to see the possibilities?", "Yes" ).then(
	function( response ) {

	console.log( "Prompt accomplished with", response );

	},
	function() {

	console.log( "Prompt failed :(" );

	}
	);


	// Use new, injected confirm.
	confirm( "Has it come to this?" ).then(
	function( response ) {

	console.log( "Confirm accomplished with", response );

	},
	function() {

	console.log( "Confirm failed :(" );

	}
	);


	// This last console.log is here to demonstrate that the asynchronous
	// alerts, prompts, and confirms will be rejected in a future tick of
	// the event loop and will invoke logging AFTER this line of code.
	console.log( "Testing completed." );

	}
	);


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


	// I define an asynchronous wrapper to the native alert() method. It returns a
	// promise that will be resolved in a future tick of the event loop.
	// --
	// NOTE: This promise will never be "rejected" since there is no divergent
	// behavior available to the user with the alert() method.
	app.factory(
	"alert",
	function( $window, $q ) {

	// Define promise-based alert() method.
	function alert( message ) {

	var defer = $q.defer();

	$window.alert( message );

	defer.resolve();

	return( defer.promise );

	}

	return( alert );

	}
	);


	// I define an asynchronous wrapper to the native prompt() method. It returns a
	// promise that will be "resolved" if the user submits the prompt; or will be
	// "rejected" if the user cancels the prompt.
	app.factory(
	"prompt",
	function( $window, $q ) {

	// Define promise-based prompt() method.
	function prompt( message, defaultValue ) {

	var defer = $q.defer();

	// The native prompt will return null or a string.
	var response = $window.prompt( message, defaultValue );

	if ( response === null ) {

	defer.reject();

	} else {

	defer.resolve( response );

	}

	return( defer.promise );

	}

	return( prompt );

	}
	);


	// I define an asynchronous wrapper to the native confirm() method. It returns a
	// promise that will be "resolved" if the user agrees to the confirmation; or
	// will be "rejected" if the user cancels the confirmation.
	app.factory(
	"confirm",
	function( $window, $q ) {

	// Define promise-based confirm() method.
	function confirm( message ) {

	var defer = $q.defer();

	// The native confirm will return a boolean.
	if ( $window.confirm( message ) ) {

	defer.resolve( true );

	} else {

	defer.reject( false );

	}

	return( defer.promise );

	}

	return( confirm );

	}
	);

	</script>

	</body>
	</html>