Add redirect demo.

bennadel · bennadel · commit b02190eeb7c2 · 2015-02-09T07:09:14.000-05:00
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [$route redirectTo Does Not Break The Back Button In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/route-redirect-back-button-angularjs/)
 * [Exploring $q And Scope $digest Integration In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/q-scope-digest-integration-angularjs/)
 * [Monitoring $http Activity With $http Interceptors In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/http-interceptors-angularjs/)
 * [Monkey-Patching The $q Service Using $provide.decorator() In AngularJS](http://bennadel.github.io/JavaScript-Demos/demos/monkey-patching-q-using-decorate-angularjs/)
diff --git a/demos/route-redirect-back-button-angularjs/index.htm b/demos/route-redirect-back-button-angularjs/index.htm
@@ -0,0 +1,129 @@
+<!doctype html>
+<html ng-app="Demo">
+<head>
+	<meta charset="utf-8" />
+
+	<title>
+		$route redirectTo Does Not Break The Back Button In AngularJS
+	</title>
+</head>
+<body ng-controller="AppController">
+
+	<h1>
+		$route redirectTo Does Not Break The Back Button In AngularJS
+	</h1>
+
+	<p>
+		<a href="#/home">Home</a>
+		&mdash;
+		<a href="#/people">People</a>
+	</p>
+
+	<p>
+		<strong>Action</strong>: {{ routeAction }}
+	</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 ) {
+
+				$routeProvider
+					.when(
+						"/home",
+						{
+							action: "home"
+						}
+					)
+
+					// Notice that this route doesn't actually map to an action. Rather,
+					// it redirects to a sub-route off of the current route.
+					// --
+					// NOTE: Under the hood, this uses $location.replace(), which is 
+					// intended to keep the back-button working properly with redirects.
+					.when(
+						"/people",
+						{
+							redirectTo: "/people/friends"
+						}
+					)
+
+					.when(
+						"/people/friends",
+						{
+							action: "people.friends"
+						}
+					)
+					.when(
+						"/people/enemies",
+						{
+							action: "people.enemies"
+						}
+					)
+					.otherwise({
+						redirectTo: "/home"
+					})
+				;
+
+			}
+		);
+
+
+		// -------------------------------------------------- //
+		// -------------------------------------------------- //
+
+
+		// I control the root of the application.
+		app.controller(
+			"AppController",
+			function( $scope, $route, $routeParams ) {
+
+				$scope.routeAction = null;
+
+				// I listen for route-change events. 
+				$scope.$on(
+					"$routeChangeSuccess",
+					function handleRouteChangeEvent( event ) {
+
+						var current = $route.current;
+
+						console.log( "Route change event:", current.originalPath );
+
+						// If the current route doesn't contain an action, then it will,
+						// in all likelihood, be redirected to another route that does
+						// contain a valid action (configured in $routeProvider).
+						if ( ! current.action ) {
+
+							console.warn(
+								"Route does not contain an action.",
+								"Redirecting to another route."
+							);
+
+						}
+
+						// Store our current action for output.
+						$scope.routeAction = current.action;
+
+					}
+				);
+
+			}
+		);
+
+	</script>
+
+</body>
+</html>
