Use angular-ui-router

StuartCoope · StuartCoope · commit 13a764a1929c · 2013-10-20T20:07:25.000+01:00
Using States rather than routes. Had to apply a patch to angular-ui-router: angular-ui/ui-router#492 This should be fixed when angular-ui-router 0.3 comes out
diff --git a/app/public/index.html b/app/public/index.html
@@ -9,6 +9,7 @@
   <link rel="stylesheet" href="css/bootstrap.css">
   <script src="lib/angular/angular.js"></script>
   <script src="lib/angular/angular-resource.js"></script>
+  <script src="lib/angular-ui-router.js"></script>
 
   <script src="podium/PodiumModule.js"></script>
   <script src="users/UserModule.js"></script>
@@ -21,6 +22,7 @@
   
 </head>
 <body>
-	<div ng-view></div>
+  <div ui-view="header"></div>
+  <div class="content" ui-view="content"></div>
 </body>
 </html>
diff --git a/app/public/lib/angular-ui-router.js b/app/public/lib/angular-ui-router.js
@@ -765,7 +765,7 @@ angular.module('ui.router.router').provider('$urlRouter', $UrlRouterProvider);
 $StateProvider.$inject = ['$urlRouterProvider', '$urlMatcherFactoryProvider', '$locationProvider'];
 function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $locationProvider) {
 
-  var root, states = {}, $state;
+  var root, states = {}, $state, queue = {};
 
   // Builds state properties from definition passed to registerState()
   var stateBuilder = {
@@ -902,6 +902,13 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
     return undefined;
   }
 
+  function queueState(parentName, state){
+    if(!queue[parentName]){
+      queue[parentName] = [];
+    }
+    queue[parentName].push(state); 
+  }
+
 
   function registerState(state) {
     // Wrap a new object around the state so we can store our private details easily.
@@ -915,6 +922,17 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
     if (!isString(name) || name.indexOf('@') >= 0) throw new Error("State must have a valid name");
     if (states[name]) throw new Error("State '" + name + "'' is already defined");
 
+    //get parent name
+    var parentName =
+      (name.indexOf('.') !== -1) ? name.substring(0, name.lastIndexOf('.'))
+        : (isString(state.parent)) ? state.parent
+        : '';
+
+    // If parent is not registered yet, add state to queue and register later
+    if (parentName && !states[parentName]) {
+      return queueState(parentName, state.self);
+    }
+
     for (var key in stateBuilder) {
       state[key] = stateBuilder[key](state);
     }
@@ -928,6 +946,14 @@ function $StateProvider(   $urlRouterProvider,   $urlMatcherFactory,           $
         }
       }]);
     }
+
+    // Register any queued children
+    if (queue[name]) {
+      for (var i = 0; i < queue[name].length; i++) {
+        registerState(queue[name][i]);
+      }
+    }
+
     return state;
   }
 
diff --git a/app/public/podium/PodiumController.js b/app/public/podium/PodiumController.js
@@ -19,3 +19,8 @@ podium.controller("PodiumCtrl" ["$scope", function($scope){
 }]);
 
 
+podium.controller("HeaderCtrl" ["$scope", function($scope){
+	
+}]);
+
+
diff --git a/app/public/podium/PodiumModule.js b/app/public/podium/PodiumModule.js
@@ -1,10 +1,55 @@
 "use strict";
 
-var podium = angular.module("podium", ["users"]);
+var podium = angular.module("podium", [
+	"users",
+	"ui.router"
+]);
+
+podium.config(["$stateProvider", "$routeProvider", function($stateProvider, $routeProvider) {
+
+	$stateProvider
+		.state("main", {
+			url: '',
+			abstract: true,
+			views: {
+				'header': {
+					templateUrl: 'podium/partials/header.html',
+					controller: 'MainCtrl'
+				}
+			}
+		})
+		.state("main.home", {
+			url: '/',
+			views: {
+				'content@': {
+					templateUrl: 'podium/partials/main.html'
+				}
+			}
+		})
+		.state("main.list", {
+			url: '/list',
+			views: {
+				'content@': {
+					templateUrl: 'podium/partials/list.html'
+				}
+			}
+		});
 
-podium.config(["$routeProvider", function($routeProvider) {
-	$routeProvider
-		.when("/", {templateUrl: "podium/partials/main.html", controller: "MainCtrl"})
-		.when("/:content", {templateUrl: "podium/partials/main.html", controller: "MainCtrl" });
 }]);
 
+var users = angular.module("users", ["users.service", "ui.router"]);
+
+users.config(["$stateProvider", "$routeProvider", function($stateProvider, $routeProvider){
+
+	$stateProvider
+		.state("main.register", {
+			url: '/register',
+			views: {
+				'content@': {
+					templateUrl: 'users/partials/register.html',
+					controller: 'RegisterCtrl'
+				}
+			}
+		});
+
+}]);
diff --git a/app/public/podium/partials/list.html b/app/public/podium/partials/list.html
@@ -0,0 +1 @@
+<div>List</div>
diff --git a/app/public/podium/partials/main.html b/app/public/podium/partials/main.html
@@ -1,6 +1,3 @@
 <div ng-controller="MainCtrl" class="container">
-	<ng-include src='"podium/partials/header.html"'></ng-include>
-
-	<ng-include src='"podium/partials/content.html"'></ng-include>
-	
+	Main Partial
 </div>
diff --git a/app/public/users/UserModule.js b/app/public/users/UserModule.js
@@ -1,6 +1,30 @@
 "use strict";
 
-var users = angular.module("users", ["users.service"]);
+var users = angular.module("users", ["users.service", "ui.router"]);
+
+users.config(["$stateProvider", "$routeProvider", function($stateProvider, $routeProvider){
+
+	$stateProvider
+		.state("main.register", {
+			url: '/register',
+			views: {
+				'content@': {
+					templateUrl: 'users/partials/register.html',
+					controller: 'RegisterCtrl'
+				}
+			}
+		})
+		.state("main.login", {
+			url: '/login',
+			views: {
+				'content@': {
+					templateUrl: 'users/partials/login.html',
+					controller: 'LoginCtrl'
+				}
+			}
+		})
+
+}]);
 /*
 users.config(["$routeProvider", function($routeProvider){
 	$routeProvider

-Original file line number
+Diff line change
 }]);
 +podium.controller("HeaderCtrl" ["$scope", function($scope){
++
 +}]);
++
++