AngularJS: Utilize ngRoute for filters

Supersedes #733 Inline-templating love contributed by @stephenplusplus <3

AngularJS: Utilize ngRoute for filters
Supersedes #733 Inline-templating love contributed by @stephenplusplus <3
723b0059 · Pascal Hartig · 51172b18 · 723b0059 · 723b0059 · 723b0059
Commit 723b0059 authored Dec 19, 2013 by Pascal Hartig
6 changed files
--- a/architecture-examples/angularjs/bower.json
+++ b/architecture-examples/angularjs/bower.json
@@ -2,10 +2,11 @@
  "name": "todomvc-angular",
  "version": "0.0.0",
  "dependencies": {
-    "angular": "~1.2.1",
+    "angular": "1.2.5",
    "todomvc-common": "~0.1.4"
  },
  "devDependencies": {
-    "angular-mocks": "~1.2.1"
+    "angular-mocks": "1.2.5",
+    "angular-route": "1.2.5"
  }
 }
--- a/architecture-examples/angularjs/bower_components/angular-route/angular-route.js
+++ b/architecture-examples/angularjs/bower_components/angular-route/angular-route.js
--- a/architecture-examples/angularjs/bower_components/angular/angular.js
+++ b/architecture-examples/angularjs/bower_components/angular/angular.js
--- a/architecture-examples/angularjs/index.html
+++ b/architecture-examples/angularjs/index.html
 <!doctype html>
-<html lang="en" ng-app="todomvc" data-framework="angularjs">
+<html lang="en" data-framework="angularjs">
 	<head>
 		<meta charset="utf-8">
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -7,7 +7,10 @@
 		<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
 		<style>[ng-cloak] { display: none; }</style>
 	</head>
-	<body>
+	<body ng-app="todomvc">
+		<ng-view />
+
+		<script type="text/ng-template" id="todomvc-index.html">
 			<section id="todoapp" ng-controller="TodoCtrl">
 				<header id="header">
 					<h1>todos</h1>
@@ -37,13 +40,13 @@
 					</span>
 					<ul id="filters">
 						<li>
-						<a ng-class="{selected: location.path() == '/'} " href="#/">All</a>
+							<a ng-class="{selected: status == ''} " href="#/">All</a>
 						</li>
 						<li>
-						<a ng-class="{selected: location.path() == '/active'}" href="#/active">Active</a>
+							<a ng-class="{selected: status == 'active'}" href="#/active">Active</a>
 						</li>
 						<li>
-						<a ng-class="{selected: location.path() == '/completed'}" href="#/completed">Completed</a>
+							<a ng-class="{selected: status == 'completed'}" href="#/completed">Completed</a>
 						</li>
 					</ul>
 					<button id="clear-completed" ng-click="clearCompletedTodos()" ng-show="completedCount">Clear completed ({{completedCount}})</button>
@@ -59,8 +62,10 @@
 				</p>
 				<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
 			</footer>
+		</script>
 		<script src="bower_components/todomvc-common/base.js"></script>
 		<script src="bower_components/angular/angular.js"></script>
+		<script src="bower_components/angular-route/angular-route.js"></script>
 		<script src="js/app.js"></script>
 		<script src="js/controllers/todoCtrl.js"></script>
 		<script src="js/services/todoStorage.js"></script>

--- a/architecture-examples/angularjs/js/app.js
+++ b/architecture-examples/angularjs/js/app.js
@@ -7,4 +7,15 @@
 *
 * @type {angular.Module}
 */
-var todomvc = angular.module('todomvc', []);
+var todomvc = angular.module('todomvc', ['ngRoute'])
+	.config(function ($routeProvider) {
+		$routeProvider.when('/', {
+			controller: 'TodoCtrl',
+      templateUrl: 'todomvc-index.html'
+		}).when('/:status', {
+			controller: 'TodoCtrl',
+      templateUrl: 'todomvc-index.html'
+		}).otherwise({
+			redirectTo: '/'
+		});
+	});
--- a/architecture-examples/angularjs/js/controllers/todoCtrl.js
+++ b/architecture-examples/angularjs/js/controllers/todoCtrl.js
@@ -6,7 +6,7 @@
 * - retrieves and persists the model via the todoStorage service
 * - exposes the model to the template and provides event handlers
 */
-todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage, filterFilter) {
+todomvc.controller('TodoCtrl', function TodoCtrl($scope, $routeParams, todoStorage, filterFilter) {
 	var todos = $scope.todos = todoStorage.get();

 	$scope.newTodo = '';
@@ -21,15 +21,12 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 		}
 	}, true);

-	if ($location.path() === '') {
-		$location.path('/');
-	}
-
-	$scope.location = $location;
+	// Monitor the current route for changes and adjust the filter accordingly.
+	$scope.$on('$routeChangeSuccess', function () {
+		var status = $scope.status = $routeParams.status || '';

-	$scope.$watch('location.path()', function (path) {
-		$scope.statusFilter = (path === '/active') ?
-			{ completed: false } : (path === '/completed') ?
+		$scope.statusFilter = (status === 'active') ?
+			{ completed: false } : (status === 'completed') ?
 			{ completed: true } : null;
 	});