Add route resolution function demo.

bennadel · bennadel · commit fed5137f1f58 · 2015-02-14T07:29:05.000-05:00
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Route Resolution Using Factory Functions vs. Services In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/route-resolution-factory-angularjs/)
 * [Exploring $route Resolution In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/route-resolve-angularjs/)
 * [$route redirectTo Will Pass-Through Current Route Params In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/route-redirect-params-angularjs/)
 * [$route redirectTo Does Not Break The Back Button In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/route-redirect-back-button-angularjs/)
diff --git a/demos/route-resolution-factory-angularjs/index.htm b/demos/route-resolution-factory-angularjs/index.htm
@@ -0,0 +1,125 @@
+<!doctype html>
+<html ng-app="Demo">
+<head>
+	<meta charset="utf-8" />
+
+	<title>
+		Route Resolution Using Factory Functions vs. Services In AngularJS
+	</title>
+</head>
+<body>
+
+	<h1>
+		Route Resolution Using Factory Functions vs. Services In AngularJS
+	</h1>
+
+	<p>
+		<a href="#/a">Section A</a>
+		&mdash;
+		<a href="#/b">Section B</a>
+	</p>
+
+
+	<!-- Load scripts. -->
+	<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.8.min.js"></script>
+	<script type="text/javascript" src="../../vendor/angularjs/angular-route-1.3.8.min.js"></script>
+	<script type="text/javascript">
+
+		// Create an application module for our demo.
+		var app = angular.module( "Demo", [ "ngRoute" ] );
+
+
+		// -------------------------------------------------- //
+		// -------------------------------------------------- //
+
+
+		// I setup the routes for the application.
+		app.config(
+			function( $routeProvider ) {
+
+				// Define routes for the application.
+				$routeProvider
+					.when(
+						"/a",
+						{
+							resolve: {
+								// In this case, we're going to define the route 
+								// resolution as a factory function. This function will 
+								// be invoked every time the route is accessed and should
+								// return a value or a promise.
+								// --
+								// NOTE: Accessed using $injector.invoke().
+								aResolutionFactory: function() {
+
+									console.log( "A-resolver" );
+
+									return( "a-value-or-promise" );
+
+								}
+							}
+						}
+					)
+					.when(
+						"/b",
+						{
+							resolve: {
+								// In this case, we're going to define the route 
+								// resolution as a service. The String here represents
+								// the name of a service within the Dependency-Injection
+								// container. This service will be instantiated the first
+								// time that this route is accessed. For every subsequent
+								// route access, the already-instantiated service is used.
+								// --
+								// NOTE: Accessed using $injector.get().
+								bResolutionService: "bResolutionService"
+							}
+						}
+					)
+
+					// And, if nothing else matches, just redirect to section A.
+					.otherwise({
+						redirectTo: "/a"
+					})
+				;
+
+			}
+		);
+
+
+		// -------------------------------------------------- //
+		// -------------------------------------------------- //
+
+
+		// I provide a service that loads a route resource and returns the resolved 
+		// value (or a promise of the resolved value).
+		app.factory(
+			"bResolutionService",
+			function( $q ) {
+
+				console.log( "B-resolver" );
+
+				return( $q.when( "b-value-or-promise" ) );
+
+			}
+		);
+
+
+		// -------------------------------------------------- //
+		// -------------------------------------------------- //
+
+
+		// Since we don't have any controllers in this demo, we have to inject the
+		// $route service at least ONCE in order to get the routing module to fully load.
+		// Without this step, none of the other routing will work.
+		app.run(
+			function loadRoute( $route ) {
+
+				// Just forcing $route service to be instantiated.
+
+			}
+		)
+
+	</script>
+
+</body>
+</html>
