bennadel/index.htm

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

	<!--
		When setting the window title, we can display a default value
		in the tags, then take it "over" using the ngBind directive.
		This binds the tag content to the given Model (scope value).
	-->
	<title ng-bind="windowTitle">AngularJS Demo Loading</title>
</head>
<body>

	<h1>
		Setting Prototype Properites Using Scope Methods In AngularJS
	</h1>

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

		<p>
			Window Title:<br />
			<input type="text" ng-model="name" size="30" />
			<input type="submit" value="Update Title" />

			<!-- Compare to property-only setting. -->
			<a ng-click="setProperty()">Set Property Directly</a>
		</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", [] );


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


		// Define our root-level controller for the application.
		Demo.controller(
			"AppController",
			function( $scope ) {

				// Set up the default programmtic window title. Once
				// the app runs, this will overwrite the value that
				// is currently set in the HTML.
				$scope.windowTitle = "Default Set In AppController";

				// This App Controller is the only controller that
				// has access to the Title element. As such, we need
				// to provide a way for deeply nested Controllers to
				// update the window title according to the page
				// state.
				$scope.setWindowTitle = function( title ) {

					// This function closure has lexical access to
					// the $scope instance associated with this App
					// Controller. That means that when this method
					// is invoked on a "sub-classed" $scope instance,
					// it will affect this scope higher up in the
					// prototype chain.
					$scope.windowTitle = title;

				};

			}
		);


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


		// Define our Form controller.
		Demo.controller(
			"FormController",
			function( $scope ) {

				// Default the empty form field.
				$scope.name = "Go Ahead - Try Me";

				// When the form is saved, let's update the window
				// title with the new value.
				$scope.save = function() {

					// The setWindowTitle() method is inherited from
					// the scope prototype chain - in this case, it is
					// being inherited from the AppController $scope.
					this.setWindowTitle( this.name );

				};

				// When the user clicks the set-property link, we're
				// going to try to set the window title using just a
				// direct proprty reference.
				$scope.setProperty = function() {

					// Set the window title directly.
					this.windowTitle = this.name;

				};

			}
		);


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

	</script>

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

	<!--
	When setting the window title, we can display a default value
	in the tags, then take it "over" using the ngBind directive.
	This binds the tag content to the given Model (scope value).
	-->
	<title ng-bind="windowTitle">AngularJS Demo Loading</title>
	</head>
	<body>

	<h1>
	Setting Prototype Properites Using Scope Methods In AngularJS
	</h1>

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

	<p>
	Window Title:<br />
	<input type="text" ng-model="name" size="30" />
	<input type="submit" value="Update Title" />

	<!-- Compare to property-only setting. -->
	<a ng-click="setProperty()">Set Property Directly</a>
	</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", [] );


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


	// Define our root-level controller for the application.
	Demo.controller(
	"AppController",
	function( $scope ) {

	// Set up the default programmtic window title. Once
	// the app runs, this will overwrite the value that
	// is currently set in the HTML.
	$scope.windowTitle = "Default Set In AppController";

	// This App Controller is the only controller that
	// has access to the Title element. As such, we need
	// to provide a way for deeply nested Controllers to
	// update the window title according to the page
	// state.
	$scope.setWindowTitle = function( title ) {

	// This function closure has lexical access to
	// the $scope instance associated with this App
	// Controller. That means that when this method
	// is invoked on a "sub-classed" $scope instance,
	// it will affect this scope higher up in the
	// prototype chain.
	$scope.windowTitle = title;

	};

	}
	);


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


	// Define our Form controller.
	Demo.controller(
	"FormController",
	function( $scope ) {

	// Default the empty form field.
	$scope.name = "Go Ahead - Try Me";

	// When the form is saved, let's update the window
	// title with the new value.
	$scope.save = function() {

	// The setWindowTitle() method is inherited from
	// the scope prototype chain - in this case, it is
	// being inherited from the AppController $scope.
	this.setWindowTitle( this.name );

	};

	// When the user clicks the set-property link, we're
	// going to try to set the window title using just a
	// direct proprty reference.
	$scope.setProperty = function() {

	// Set the window title directly.
	this.windowTitle = this.name;

	};

	}
	);


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

	</script>

	</body>
	</html>