bennadel · September 13, 2012 14:49 · jasonm23 · Mar 5, 2013
diff --git a/index.htm b/index.htm
 <!doctype html>
 <html ng-app="Demo">
 <head>
 	<meta charset="utf-8" />

 	<title>Controllers With Instance Methods In AngularJS</title>
 </head>
 <body>

 	<h1>
 		Controllers With Instance Methods In AngularJS
 	</h1>

 	<form ng-controller="FormController" ng-submit="processForm()">

 		<!-- Only show this IF the error message exists. -->
 		<p ng-show="errorMessage">
 			<strong>Oops:</strong> {{ errorMessage }}
 		</p>

 		<p>
 			Please enter your name:<br />
 			<input type="text" ng-model="name" size="20"
 				bn-focus-on-change="submitCount"
 				/>
 		</p>

 		<p>
 			<input type="submit" value="Submit" />
 		</p>

 	</form>


 	<!-- Load AngularJS from the CDN. -->
 	<script
 		type="text/javascript"
 		src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
 	</script>
 	<script type="text/javascript">


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


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


 		// Create a private execution space for our controller. When
 		// executing this function expression, we're going to pass in
 		// the Angular reference and our application module.
 		(function( ng, app ) {


 			// Define our Controller constructor.
 			function Controller( $scope ) {

 				// Store the scope so we can reference it in our
 				// class methods
 				this.scope = $scope;

 				// Set up the default scope value.
 				this.scope.errorMessage = null;
 				this.scope.name = "";

 				// The submit count will work inconjunction with the
 				// bnFocusOnChange directive to focus the form field
 				// when the submit count increments.
 				this.scope.submitCount = 0;

 				// The submit function has to be on the scope;
 				// however, we want it to be processed by the
 				// controller. As such, we have to pipe the scope
 				// handler into the Controller method.
 				this.scope.processForm = ng.bind( this, this.processForm );

 				// Return this object reference.
 				return( this );

 			}


 			// Define the class methods on the controller.
 			Controller.prototype = {

 				// I clean the form data, removing any values that we
 				// don't want to incorporate into our processing.
 				cleanFormData: function() {

 					// Strip off whitespace.
 					this.scope.name = this.stripWhiteSpace( this.scope.name );

 				},


 				// I greet the person with the given name.
 				greet: function() {

 					alert( "Hello " + this.scope.name );

 				},


 				// I handle the submit event on the form.
 				processForm: function() {

 					// Increase the submission count. This will cause
 					// the form field to be focused after all the
 					// watchers have finished processing.
 					this.scope.submitCount++;

 					// Clean form data.
 					this.cleanFormData();

 					// Check to see if the form is valie.
 					if ( ! this.scope.name ) {

 						// Set the error message.
 						this.scope.errorMessage = "Please enter your name.";

 						// Don't do any further processing.
 						return;

 					}

 					// If we made it this far, the form is valid.
 					this.greet();
 					this.resetForm();

 				},


 				// I reset the form (by resetting the scope).
 				resetForm: function() {

 					this.scope.errorMessage = null;
 					this.scope.name = "";

 				},


 				// I strip whitespace off the given value (leading
 				// and trailing).
 				stripWhiteSpace: function( value ) {

 					return(
 						value.replace( /^\s+|\s+$/g, "" )
 					);

 				}

 			};


 			// Define the Controller as the constructor function.
 			app.controller( "FormController", Controller );


 		})( angular, Demo );


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


 		// Define our directive that will focus a given input when
 		// expression in question changes.
 		Demo.directive(
 			"bnFocusOnChange",
 			function() {


 				var linkFunction = function( $scope, element, attributes ) {

 					// Get the name of the attribute we are going to
 					// be watching for focus.
 					var valueToWatch = attributes.bnFocusOnChange;

 					// Watch the value within the scope and focus the
 					// input when it changes.
 					$scope.$watch(
 						valueToWatch,
 						function( newValue, oldValue ) {

 							element[ 0 ].focus();

 						}
 					);


 				};


 				// Return the link function.
 				return( linkFunction );


 			}
 		);


 	</script>

 </body>
 </html>
diff --git a/misc_angular_1.htm b/misc_angular_1.htm
 <div ng-controller="MyCtrl">

 	{{ someValue }}

 </div>
diff --git a/misc_angular_1.js b/misc_angular_1.js
 function MyCtrl( $scope ){

 	$scope.someValue = "All your base are belong to us!";

 }
diff --git a/misc_angular_2.js b/misc_angular_2.js
 // Define "MyController" for the Dependency Injection framework
 // being used by our application.
 app.controller(
 	"MyController",
 	funciton( $scope ){

 		$scope.someValue = "All your base are belong to us!";

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

	<title>Controllers With Instance Methods In AngularJS</title>
	</head>
	<body>

	<h1>
	Controllers With Instance Methods In AngularJS
	</h1>

	<form ng-controller="FormController" ng-submit="processForm()">

	<!-- Only show this IF the error message exists. -->
	<p ng-show="errorMessage">
	<strong>Oops:</strong> {{ errorMessage }}
	</p>

	<p>
	Please enter your name:<br />
	<input type="text" ng-model="name" size="20"
	bn-focus-on-change="submitCount"
	/>
	</p>

	<p>
	<input type="submit" value="Submit" />
	</p>

	</form>


	<!-- Load AngularJS from the CDN. -->
	<script
	type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
	</script>
	<script type="text/javascript">


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


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


	// Create a private execution space for our controller. When
	// executing this function expression, we're going to pass in
	// the Angular reference and our application module.
	(function( ng, app ) {


	// Define our Controller constructor.
	function Controller( $scope ) {

	// Store the scope so we can reference it in our
	// class methods
	this.scope = $scope;

	// Set up the default scope value.
	this.scope.errorMessage = null;
	this.scope.name = "";

	// The submit count will work inconjunction with the
	// bnFocusOnChange directive to focus the form field
	// when the submit count increments.
	this.scope.submitCount = 0;

	// The submit function has to be on the scope;
	// however, we want it to be processed by the
	// controller. As such, we have to pipe the scope
	// handler into the Controller method.
	this.scope.processForm = ng.bind( this, this.processForm );

	// Return this object reference.
	return( this );

	}


	// Define the class methods on the controller.
	Controller.prototype = {

	// I clean the form data, removing any values that we
	// don't want to incorporate into our processing.
	cleanFormData: function() {

	// Strip off whitespace.
	this.scope.name = this.stripWhiteSpace( this.scope.name );

	},


	// I greet the person with the given name.
	greet: function() {

	alert( "Hello " + this.scope.name );

	},


	// I handle the submit event on the form.
	processForm: function() {

	// Increase the submission count. This will cause
	// the form field to be focused after all the
	// watchers have finished processing.
	this.scope.submitCount++;

	// Clean form data.
	this.cleanFormData();

	// Check to see if the form is valie.
	if ( ! this.scope.name ) {

	// Set the error message.
	this.scope.errorMessage = "Please enter your name.";

	// Don't do any further processing.
	return;

	}

	// If we made it this far, the form is valid.
	this.greet();
	this.resetForm();

	},


	// I reset the form (by resetting the scope).
	resetForm: function() {

	this.scope.errorMessage = null;
	this.scope.name = "";

	},


	// I strip whitespace off the given value (leading
	// and trailing).
	stripWhiteSpace: function( value ) {

	return(
	value.replace( /^\s+\|\s+$/g, "" )
	);

	}

	};


	// Define the Controller as the constructor function.
	app.controller( "FormController", Controller );


	})( angular, Demo );


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


	// Define our directive that will focus a given input when
	// expression in question changes.
	Demo.directive(
	"bnFocusOnChange",
	function() {


	var linkFunction = function( $scope, element, attributes ) {

	// Get the name of the attribute we are going to
	// be watching for focus.
	var valueToWatch = attributes.bnFocusOnChange;

	// Watch the value within the scope and focus the
	// input when it changes.
	$scope.$watch(
	valueToWatch,
	function( newValue, oldValue ) {

	element[ 0 ].focus();

	}
	);


	};


	// Return the link function.
	return( linkFunction );


	}
	);


	</script>

	</body>
	</html>
	function MyCtrl( $scope ){

	$scope.someValue = "All your base are belong to us!";

	}
	// Define "MyController" for the Dependency Injection framework
	// being used by our application.
	app.controller(
	"MyController",
	funciton( $scope ){

	$scope.someValue = "All your base are belong to us!";

	}
	);