feat(app-routing): improve app routing

kingcody · DaftMonk · commit 6aadee6d956c · 2014-09-16T23:44:16.000-06:00
Changes: - Use `ui-sref` instead of `href` or `ng-href` when ui-router is chosen - Use `ui-sref-active` instead of `ng-class='{active: isActive()}'` when ui-router is chosen - Use `$state.go()` where applicable, when ui-router is chosen - Use `$scope.menu[n].state` instead of `$scope.menu[n].link` when ui-router is chosen (attempt to remove possible confusion) - Omit `$scope.isActive` when ui-router is chosen - Simplify `navbar(jade).jade` templating (remove extra `<% if (filters.auth) %>` tag) - Add `/logout` route for both ng-route and ui-router - Use `$routeChangeStart` or `$stateChangeStart` to pass refering route or state to `/logout` - Add `stateMock` for testing `$state` transitions - Use `stateMock` in main.controller for expecting template requests from state transistions Closes #331
diff --git a/app/templates/client/app/account(auth)/account(coffee).coffee b/app/templates/client/app/account(auth)/account(coffee).coffee
@@ -7,6 +7,14 @@ angular.module '<%= scriptAppName %>'
     templateUrl: 'app/account/login/login.html'
     controller: 'LoginCtrl'
 
+  .when '/logout',
+    name: 'logout'
+    referrer: '/'
+    controller: ($location, $route, Auth) ->
+      referrer = $route.current.params.referrer or $route.current.referrer or "/"
+      Auth.logout()
+      $location.path referrer
+
   .when '/signup',
     templateUrl: 'app/account/signup/signup.html'
     controller: 'SignupCtrl'
@@ -15,13 +23,25 @@ angular.module '<%= scriptAppName %>'
     templateUrl: 'app/account/settings/settings.html'
     controller: 'SettingsCtrl'
     authenticate: true
+
+.run ($rootScope) ->
+  $rootScope.$on '$routeChangeStart', (event, next, current) ->
+    next.referrer = current.originalPath  if next.name is "logout" and current and current.originalPath and not current.authenticate
 <% } %><% if(filters.uirouter) { %>.config ($stateProvider) ->
   $stateProvider
   .state 'login',
     url: '/login'
     templateUrl: 'app/account/login/login.html'
     controller: 'LoginCtrl'
 
+  .state 'logout',
+    url: '/logout?referrer'
+    referrer: 'main'
+    controller: ($state, Auth) ->
+      referrer = $state.params.referrer or $state.current.referrer or "main"
+      Auth.logout()
+      $state.go referrer
+
   .state 'signup',
     url: '/signup'
     templateUrl: 'app/account/signup/signup.html'
@@ -32,4 +52,8 @@ angular.module '<%= scriptAppName %>'
     templateUrl: 'app/account/settings/settings.html'
     controller: 'SettingsCtrl'
     authenticate: true
-<% } %>
+
+.run ($rootScope) ->
+  $rootScope.$on '$stateChangeStart', (event, next, nextParams, current) ->
+    next.referrer = current.name  if next.name is "logout" and current and current.name and not current.authenticate
+<% } %>
diff --git a/app/templates/client/app/account(auth)/account(js).js b/app/templates/client/app/account(auth)/account(js).js
@@ -7,6 +7,17 @@ angular.module('<%= scriptAppName %>')
         templateUrl: 'app/account/login/login.html',
         controller: 'LoginCtrl'
       })
+      .when('/logout', {
+        name: 'logout',
+        referrer: '/',
+        controller: function($location, $route, Auth) {
+          var referrer = $route.current.params.referrer ||
+                          $route.current.referrer ||
+                          '/';
+          Auth.logout();
+          $location.path(referrer);
+        }
+      })
       .when('/signup', {
         templateUrl: 'app/account/signup/signup.html',
         controller: 'SignupCtrl'
@@ -16,13 +27,31 @@ angular.module('<%= scriptAppName %>')
         controller: 'SettingsCtrl',
         authenticate: true
       });
+  })
+  .run(function($rootScope) {
+    $rootScope.$on('$routeChangeStart', function(event, next, current) {
+      if (next.name === 'logout' && current && current.originalPath && !current.authenticate) {
+        next.referrer = current.originalPath;
+      }
+    });
   });<% } %><% if(filters.uirouter) { %>.config(function ($stateProvider) {
     $stateProvider
       .state('login', {
         url: '/login',
         templateUrl: 'app/account/login/login.html',
         controller: 'LoginCtrl'
       })
+      .state('logout', {
+        url: '/logout?referrer',
+        referrer: 'main',
+        controller: function($state, Auth) {
+          var referrer = $state.params.referrer ||
+                          $state.current.referrer ||
+                          'main';
+          Auth.logout();
+          $state.go(referrer);
+        }
+      })
       .state('signup', {
         url: '/signup',
         templateUrl: 'app/account/signup/signup.html',
@@ -34,4 +63,11 @@ angular.module('<%= scriptAppName %>')
         controller: 'SettingsCtrl',
         authenticate: true
       });
-  });<% } %>
+  })
+  .run(function($rootScope) {
+    $rootScope.$on('$stateChangeStart', function(event, next, nextParams, current) {
+      if (next.name === 'logout' && current && current.name && !current.authenticate) {
+        next.referrer = current.name;
+      }
+    });
+  });<% } %>
diff --git a/app/templates/client/app/account(auth)/login/login(html).html b/app/templates/client/app/account(auth)/login/login(html).html
@@ -37,7 +37,7 @@ <h1>Login</h1>
           <button class="btn btn-inverse btn-lg btn-login" type="submit">
             Login
           </button>
-          <a class="btn btn-default btn-lg btn-register" href="/signup">
+          <a class="btn btn-default btn-lg btn-register" <% if(filters.uirouter) { %>ui-sref="signup"<% } else { %>href="/signup"<% } %>>
             Register
           </a>
         </div>
diff --git a/app/templates/client/app/account(auth)/login/login(jade).jade b/app/templates/client/app/account(auth)/login/login(jade).jade
@@ -34,7 +34,7 @@ div(ng-include='"components/navbar/navbar.html"')
           button.btn.btn-inverse.btn-lg.btn-login(type='submit')
             | Login
           = ' '
-          a.btn.btn-default.btn-lg.btn-register(href='/signup')
+          a.btn.btn-default.btn-lg.btn-register(<% if(filters.uirouter) { %>ui-sref='signup'<% } else { %>href='/signup'<% } %>)
             | Register
 <% if(filters.oauth) {%>
         hr
diff --git a/app/templates/client/app/account(auth)/login/login.controller(coffee).coffee b/app/templates/client/app/account(auth)/login/login.controller(coffee).coffee
@@ -1,7 +1,7 @@
 'use strict'
 
 angular.module '<%= scriptAppName %>'
-.controller 'LoginCtrl', ($scope, Auth, $location<% if(filters.oauth) {%>, $window<% } %>) ->
+.controller 'LoginCtrl', ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if(filters.oauth) {%>, $window<% } %>) ->
   $scope.user = {}
   $scope.errors = {}
   $scope.login = (form) ->
@@ -14,7 +14,7 @@ angular.module '<%= scriptAppName %>'
         password: $scope.user.password
 
       .then ->
-        $location.path '/'
+        <% if(filters.ngroute) { %>$location.path '/'<% } %><% if(filters.uirouter) { %>$state.go 'main'<% } %>
 
       .catch (err) ->
         $scope.errors.other = err.message
diff --git a/app/templates/client/app/account(auth)/login/login.controller(js).js b/app/templates/client/app/account(auth)/login/login.controller(js).js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>')
-  .controller('LoginCtrl', function ($scope, Auth, $location<% if (filters.oauth) { %>, $window<% } %>) {
+  .controller('LoginCtrl', function ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if (filters.oauth) { %>, $window<% } %>) {
     $scope.user = {};
     $scope.errors = {};
 
@@ -15,7 +15,7 @@ angular.module('<%= scriptAppName %>')
         })
         .then( function() {
           // Logged in, redirect to home
-          $location.path('/');
+          <% if(filters.ngroute) { %>$location.path('/');<% } %><% if(filters.uirouter) { %>$state.go('main');<% } %>
         })
         .catch( function(err) {
           $scope.errors.other = err.message;
diff --git a/app/templates/client/app/account(auth)/signup/signup(html).html b/app/templates/client/app/account(auth)/signup/signup(html).html
@@ -58,7 +58,7 @@ <h1>Sign up</h1>
           <button class="btn btn-inverse btn-lg btn-login" type="submit">
             Sign up
           </button>
-          <a class="btn btn-default btn-lg btn-register" href="/login">
+          <a class="btn btn-default btn-lg btn-register" <% if(filters.uirouter) { %>ui-sref="login"<% } else { %>href="/login"<% } %>>
             Login
           </a>
         </div>
diff --git a/app/templates/client/app/account(auth)/signup/signup(jade).jade b/app/templates/client/app/account(auth)/signup/signup(jade).jade
@@ -36,7 +36,7 @@ div(ng-include='"components/navbar/navbar.html"')
           button.btn.btn-inverse.btn-lg.btn-login(type='submit')
             | Sign up
           = ' '
-          a.btn.btn-default.btn-lg.btn-register(href='/login')
+          a.btn.btn-default.btn-lg.btn-register(<% if(filters.uirouter) { %>ui-sref='login'<% } else { %>href='/login'<% } %>)
             | Login
 
 <% if(filters.oauth) {%>
diff --git a/app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee b/app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee
@@ -1,7 +1,7 @@
 'use strict'
 
 angular.module '<%= scriptAppName %>'
-.controller 'SignupCtrl', ($scope, Auth, $location<% if(filters.oauth) {%>, $window<% } %>) ->
+.controller 'SignupCtrl', ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if(filters.oauth) {%>, $window<% } %>) ->
   $scope.user = {}
   $scope.errors = {}
   $scope.register = (form) ->
@@ -15,7 +15,7 @@ angular.module '<%= scriptAppName %>'
         password: $scope.user.password
 
       .then ->
-        $location.path '/'
+        <% if(filters.ngroute) { %>$location.path '/'<% } %><% if(filters.uirouter) { %>$state.go 'main'<% } %>
 
       .catch (err) ->
         err = err.data
diff --git a/app/templates/client/app/account(auth)/signup/signup.controller(js).js b/app/templates/client/app/account(auth)/signup/signup.controller(js).js
@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>')
-  .controller('SignupCtrl', function ($scope, Auth, $location<% if (filters.oauth) { %>, $window<% } %>) {
+  .controller('SignupCtrl', function ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if (filters.oauth) { %>, $window<% } %>) {
     $scope.user = {};
     $scope.errors = {};
 
@@ -16,7 +16,7 @@ angular.module('<%= scriptAppName %>')
         })
         .then( function() {
           // Account created, redirect to home
-          $location.path('/');
+          <% if(filters.ngroute) { %>$location.path('/');<% } %><% if(filters.uirouter) { %>$state.go('main');<% } %>
         })
         .catch( function(err) {
           err = err.data;
diff --git a/app/templates/client/app/app(coffee).coffee b/app/templates/client/app/app(coffee).coffee
@@ -15,8 +15,9 @@ angular.module '<%= scriptAppName %>', [<%= angularModules %>]
   $locationProvider.html5Mode true<% if(filters.auth) { %>
   $httpProvider.interceptors.push 'authInterceptor'<% } %>
 <% } %><% if(filters.auth) { %>
-.factory 'authInterceptor', ($rootScope, $q, $cookieStore, $location) ->
-  # Add authorization token to headers
+.factory 'authInterceptor', ($rootScope, $q, $cookieStore<% if(filters.ngroute) { %>, $location<% } if(filters.uirouter) { %>, $injector<% } %>) ->
+  <% if(filters.uirouter) { %>state = null
+  <% } %># Add authorization token to headers
   request: (config) ->
     config.headers = config.headers or {}
     config.headers.Authorization = 'Bearer ' + $cookieStore.get 'token' if $cookieStore.get 'token'
@@ -25,15 +26,15 @@ angular.module '<%= scriptAppName %>', [<%= angularModules %>]
   # Intercept 401s and redirect you to login
   responseError: (response) ->
     if response.status is 401
-      $location.path '/login'
+      <% if(filters.ngroute) { %>$location.path '/login'<% } if(filters.uirouter) { %>(state || state = $injector.get '$state').go 'login'<% } %>
       # remove any stale tokens
       $cookieStore.remove 'token'
 
     $q.reject response
 
-.run ($rootScope, $location, Auth) ->
+.run ($rootScope<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %>, Auth) ->
   # Redirect to login if route requires auth and you're not logged in
   $rootScope.$on <% if(filters.ngroute) { %>'$routeChangeStart'<% } %><% if(filters.uirouter) { %>'$stateChangeStart'<% } %>, (event, next) ->
     Auth.isLoggedIn (loggedIn) ->
-      $location.path "/login" if next.authenticate and not loggedIn
+      <% if(filters.ngroute) { %>$location.path '/login'<% } %><% if(filters.uirouter) { %>$state.go 'login'<% } %> if next.authenticate and not loggedIn
 <% } %>
diff --git a/app/templates/client/app/app(js).js b/app/templates/client/app/app(js).js
@@ -9,16 +9,17 @@ angular.module('<%= scriptAppName %>', [<%= angularModules %>])
 
     $locationProvider.html5Mode(true);<% if(filters.auth) { %>
     $httpProvider.interceptors.push('authInterceptor');<% } %>
-  })<% } %><% if(filters.uirouter) { %>.config(function ($stateProvider, $urlRouterProvider, $locationProvider<% if(filters.auth) { %>, $httpProvider<% } %>) {
+  })<% } if(filters.uirouter) { %>.config(function ($stateProvider, $urlRouterProvider, $locationProvider<% if(filters.auth) { %>, $httpProvider<% } %>) {
     $urlRouterProvider
       .otherwise('/');
 
     $locationProvider.html5Mode(true);<% if(filters.auth) { %>
     $httpProvider.interceptors.push('authInterceptor');<% } %>
-  })<% } %><% if(filters.auth) { %>
+  })<% } if(filters.auth) { %>
 
-  .factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
-    return {
+  .factory('authInterceptor', function ($rootScope, $q, $cookieStore<% if(filters.ngroute) { %>, $location<% } if(filters.uirouter) { %>, $injector<% } %>) {
+    <% if(filters.uirouter) { %>var state;
+    <% } %>return {
       // Add authorization token to headers
       request: function (config) {
         config.headers = config.headers || {};
@@ -31,7 +32,7 @@ angular.module('<%= scriptAppName %>', [<%= angularModules %>])
       // Intercept 401s and redirect you to login
       responseError: function(response) {
         if(response.status === 401) {
-          $location.path('/login');
+          <% if(filters.ngroute) { %>$location.path('/login');<% } if(filters.uirouter) { %>(state || (state = $injector.get('$state'))).go('login');<% } %>
           // remove any stale tokens
           $cookieStore.remove('token');
           return $q.reject(response);
@@ -43,12 +44,12 @@ angular.module('<%= scriptAppName %>', [<%= angularModules %>])
     };
   })
 
-  .run(function ($rootScope, $location, Auth) {
+  .run(function ($rootScope<% if(filters.ngroute) { %>, $location<% } if(filters.uirouter) { %>, $state<% } %>, Auth) {
     // Redirect to login if route requires auth and you're not logged in
     $rootScope.$on(<% if(filters.ngroute) { %>'$routeChangeStart'<% } %><% if(filters.uirouter) { %>'$stateChangeStart'<% } %>, function (event, next) {
       Auth.isLoggedIn(function(loggedIn) {
         if (next.authenticate && !loggedIn) {
-          $location.path('/login');
+          <% if(filters.ngroute) { %>$location.path('/login');<% } if(filters.uirouter) { %>$state.go('login');<% } %>
         }
       });
     });
diff --git a/app/templates/client/app/main/main.controller.spec(coffee).coffee b/app/templates/client/app/main/main.controller.spec(coffee).coffee
@@ -3,26 +3,29 @@
 describe 'Controller: MainCtrl', ->
 
   # load the controller's module
-  beforeEach module '<%= scriptAppName %>' <% if(filters.socketio) {%>
+  beforeEach module '<%= scriptAppName %>' <% if(filters.uirouter) {%>
+  beforeEach module 'stateMock' <% } %><% if(filters.socketio) {%>
   beforeEach module 'socketMock' <% } %>
 
   MainCtrl = undefined
-  scope = undefined
+  scope = undefined<% if(filters.uirouter) {%>
+  state = undefined<% } %>
   $httpBackend = undefined
 
   # Initialize the controller and a mock scope
-  beforeEach inject (_$httpBackend_, $controller, $rootScope) ->
+  beforeEach inject (_$httpBackend_, $controller, $rootScope<% if(filters.uirouter) {%>, $state<% } %>) ->
     $httpBackend = _$httpBackend_
     $httpBackend.expectGET('/api/things').respond [
       'HTML5 Boilerplate'
       'AngularJS'
       'Karma'
       'Express'
     ]
-    scope = $rootScope.$new()
+    scope = $rootScope.$new()<% if(filters.uirouter) {%>
+    state = $state<% } %>
     MainCtrl = $controller 'MainCtrl',
       $scope: scope
 
   it 'should attach a list of things to the scope', ->
     $httpBackend.flush()
-    expect(scope.awesomeThings.length).toBe 4
+    expect(scope.awesomeThings.length).toBe 4
diff --git a/app/templates/client/app/main/main.controller.spec(js).js b/app/templates/client/app/main/main.controller.spec(js).js
@@ -3,20 +3,23 @@
 describe('Controller: MainCtrl', function () {
 
   // load the controller's module
-  beforeEach(module('<%= scriptAppName %>'));<% if(filters.socketio) {%>
+  beforeEach(module('<%= scriptAppName %>'));<% if(filters.uirouter) {%>
+  beforeEach(module('stateMock'));<% } %><% if(filters.socketio) {%>
   beforeEach(module('socketMock'));<% } %>
 
   var MainCtrl,
-      scope,
+      scope,<% if(filters.uirouter) {%>
+      state,<% } %>
       $httpBackend;
 
   // Initialize the controller and a mock scope
-  beforeEach(inject(function (_$httpBackend_, $controller, $rootScope) {
+  beforeEach(inject(function (_$httpBackend_, $controller, $rootScope<% if(filters.uirouter) {%>, $state<% } %>) {
     $httpBackend = _$httpBackend_;
     $httpBackend.expectGET('/api/things')
       .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
 
-    scope = $rootScope.$new();
+    scope = $rootScope.$new();<% if(filters.uirouter) {%>
+    state = $state;<% } %>
     MainCtrl = $controller('MainCtrl', {
       $scope: scope
     });
diff --git a/app/templates/client/components/navbar/navbar(html).html b/app/templates/client/components/navbar/navbar(html).html
@@ -11,18 +11,18 @@
     </div>
     <div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
       <ul class="nav navbar-nav">
-        <li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
-            <a ng-href="{{item.link}}">{{item.title}}</a>
+        <li ng-repeat="item in menu" <% if(filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive(item.link)}"<% } %>>
+            <a <% if(filters.uirouter) { %>ui-sref="{{item.state}}"<% } else { %>ng-href="{{item.link}}"<% } %>>{{item.title}}</a>
         </li><% if(filters.auth) { %>
-        <li ng-show="isAdmin()" ng-class="{active: isActive('/admin')}"><a href="/admin">Admin</a></li><% } %>
+        <li ng-show="isAdmin()" <% if(filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive('/admin')}"<% } %>><a <% if(filters.uirouter) { %>ui-sref="admin"<% } else { %>href="/admin"<% } %>>Admin</a></li><% } %>
       </ul><% if(filters.auth) { %>
 
       <ul class="nav navbar-nav navbar-right">
-        <li ng-hide="isLoggedIn()" ng-class="{active: isActive('/signup')}"><a href="/signup">Sign up</a></li>
-        <li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}"><a href="/login">Login</a></li>
+        <li ng-hide="isLoggedIn()" <% if(filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive('/signup')}"<% } %>><a <% if(filters.uirouter) { %>ui-sref="signup"<% } else { %>href="/signup"<% } %>>Sign up</a></li>
+        <li ng-hide="isLoggedIn()" <% if(filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive('/login')}"<% } %>><a <% if(filters.uirouter) { %>ui-sref="login"<% } else { %>href="/login"<% } %>>Login</a></li>
         <li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p> </li>
-        <li ng-show="isLoggedIn()" ng-class="{active: isActive('/settings')}"><a href="/settings"><span class="glyphicon glyphicon-cog"></span></a></li>
-        <li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}"><a href="" ng-click="logout()">Logout</a></li>
+        <li ng-show="isLoggedIn()" <% if(filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive('/settings')}"<% } %>><a <% if(filters.uirouter) { %>ui-sref="settings"<% } else { %>href="/settings"<% } %>><span class="glyphicon glyphicon-cog"></span></a></li>
+        <li ng-show="isLoggedIn()"><a <% if(filters.uirouter) { %>ui-sref="logout"<% } else { %>href="/logout"<% } %>>Logout</a></li>
       </ul><% } %>
     </div>
   </div>
diff --git a/app/templates/client/components/navbar/navbar(jade).jade b/app/templates/client/components/navbar/navbar(jade).jade
diff --git a/app/templates/client/components/navbar/navbar.controller(coffee).coffee b/app/templates/client/components/navbar/navbar.controller(coffee).coffee
diff --git a/app/templates/client/components/navbar/navbar.controller(js).js b/app/templates/client/components/navbar/navbar.controller(js).js
diff --git a/app/templates/client/components/ui-router(uirouter)/ui-router.mock(coffee).coffee b/app/templates/client/components/ui-router(uirouter)/ui-router.mock(coffee).coffee
diff --git a/app/templates/client/components/ui-router(uirouter)/ui-router.mock(js).js b/app/templates/client/components/ui-router(uirouter)/ui-router.mock(js).js
