Skip to content

Commit 6aadee6

Browse files
kingcodyDaftMonk
authored andcommittedSep 17, 2014
feat(app-routing): improve app routing
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
1 parent 2aaff12 commit 6aadee6

20 files changed

+191
-72
lines changed
 

‎app/templates/client/app/account(auth)/account(coffee).coffee

+25-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ angular.module '<%= scriptAppName %>'
77
templateUrl: 'app/account/login/login.html'
88
controller: 'LoginCtrl'
99

10+
.when '/logout',
11+
name: 'logout'
12+
referrer: '/'
13+
controller: ($location, $route, Auth) ->
14+
referrer = $route.current.params.referrer or $route.current.referrer or "/"
15+
Auth.logout()
16+
$location.path referrer
17+
1018
.when '/signup',
1119
templateUrl: 'app/account/signup/signup.html'
1220
controller: 'SignupCtrl'
@@ -15,13 +23,25 @@ angular.module '<%= scriptAppName %>'
1523
templateUrl: 'app/account/settings/settings.html'
1624
controller: 'SettingsCtrl'
1725
authenticate: true
26+
27+
.run ($rootScope) ->
28+
$rootScope.$on '$routeChangeStart', (event, next, current) ->
29+
next.referrer = current.originalPath if next.name is "logout" and current and current.originalPath and not current.authenticate
1830
<% } %><% if(filters.uirouter) { %>.config ($stateProvider) ->
1931
$stateProvider
2032
.state 'login',
2133
url: '/login'
2234
templateUrl: 'app/account/login/login.html'
2335
controller: 'LoginCtrl'
2436

37+
.state 'logout',
38+
url: '/logout?referrer'
39+
referrer: 'main'
40+
controller: ($state, Auth) ->
41+
referrer = $state.params.referrer or $state.current.referrer or "main"
42+
Auth.logout()
43+
$state.go referrer
44+
2545
.state 'signup',
2646
url: '/signup'
2747
templateUrl: 'app/account/signup/signup.html'
@@ -32,4 +52,8 @@ angular.module '<%= scriptAppName %>'
3252
templateUrl: 'app/account/settings/settings.html'
3353
controller: 'SettingsCtrl'
3454
authenticate: true
35-
<% } %>
55+
56+
.run ($rootScope) ->
57+
$rootScope.$on '$stateChangeStart', (event, next, nextParams, current) ->
58+
next.referrer = current.name if next.name is "logout" and current and current.name and not current.authenticate
59+
<% } %>

‎app/templates/client/app/account(auth)/account(js).js

+37-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,17 @@ angular.module('<%= scriptAppName %>')
77
templateUrl: 'app/account/login/login.html',
88
controller: 'LoginCtrl'
99
})
10+
.when('/logout', {
11+
name: 'logout',
12+
referrer: '/',
13+
controller: function($location, $route, Auth) {
14+
var referrer = $route.current.params.referrer ||
15+
$route.current.referrer ||
16+
'/';
17+
Auth.logout();
18+
$location.path(referrer);
19+
}
20+
})
1021
.when('/signup', {
1122
templateUrl: 'app/account/signup/signup.html',
1223
controller: 'SignupCtrl'
@@ -16,13 +27,31 @@ angular.module('<%= scriptAppName %>')
1627
controller: 'SettingsCtrl',
1728
authenticate: true
1829
});
30+
})
31+
.run(function($rootScope) {
32+
$rootScope.$on('$routeChangeStart', function(event, next, current) {
33+
if (next.name === 'logout' && current && current.originalPath && !current.authenticate) {
34+
next.referrer = current.originalPath;
35+
}
36+
});
1937
});<% } %><% if(filters.uirouter) { %>.config(function ($stateProvider) {
2038
$stateProvider
2139
.state('login', {
2240
url: '/login',
2341
templateUrl: 'app/account/login/login.html',
2442
controller: 'LoginCtrl'
2543
})
44+
.state('logout', {
45+
url: '/logout?referrer',
46+
referrer: 'main',
47+
controller: function($state, Auth) {
48+
var referrer = $state.params.referrer ||
49+
$state.current.referrer ||
50+
'main';
51+
Auth.logout();
52+
$state.go(referrer);
53+
}
54+
})
2655
.state('signup', {
2756
url: '/signup',
2857
templateUrl: 'app/account/signup/signup.html',
@@ -34,4 +63,11 @@ angular.module('<%= scriptAppName %>')
3463
controller: 'SettingsCtrl',
3564
authenticate: true
3665
});
37-
});<% } %>
66+
})
67+
.run(function($rootScope) {
68+
$rootScope.$on('$stateChangeStart', function(event, next, nextParams, current) {
69+
if (next.name === 'logout' && current && current.name && !current.authenticate) {
70+
next.referrer = current.name;
71+
}
72+
});
73+
});<% } %>

‎app/templates/client/app/account(auth)/login/login(html).html

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h1>Login</h1>
3737
<button class="btn btn-inverse btn-lg btn-login" type="submit">
3838
Login
3939
</button>
40-
<a class="btn btn-default btn-lg btn-register" href="/signup">
40+
<a class="btn btn-default btn-lg btn-register" <% if(filters.uirouter) { %>ui-sref="signup"<% } else { %>href="/signup"<% } %>>
4141
Register
4242
</a>
4343
</div>

‎app/templates/client/app/account(auth)/login/login(jade).jade

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ div(ng-include='"components/navbar/navbar.html"')
3434
button.btn.btn-inverse.btn-lg.btn-login(type='submit')
3535
| Login
3636
= ' '
37-
a.btn.btn-default.btn-lg.btn-register(href='/signup')
37+
a.btn.btn-default.btn-lg.btn-register(<% if(filters.uirouter) { %>ui-sref='signup'<% } else { %>href='/signup'<% } %>)
3838
| Register
3939
<% if(filters.oauth) {%>
4040
hr

‎app/templates/client/app/account(auth)/login/login.controller(coffee).coffee

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict'
22

33
angular.module '<%= scriptAppName %>'
4-
.controller 'LoginCtrl', ($scope, Auth, $location<% if(filters.oauth) {%>, $window<% } %>) ->
4+
.controller 'LoginCtrl', ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if(filters.oauth) {%>, $window<% } %>) ->
55
$scope.user = {}
66
$scope.errors = {}
77
$scope.login = (form) ->
@@ -14,7 +14,7 @@ angular.module '<%= scriptAppName %>'
1414
password: $scope.user.password
1515

1616
.then ->
17-
$location.path '/'
17+
<% if(filters.ngroute) { %>$location.path '/'<% } %><% if(filters.uirouter) { %>$state.go 'main'<% } %>
1818

1919
.catch (err) ->
2020
$scope.errors.other = err.message

‎app/templates/client/app/account(auth)/login/login.controller(js).js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

33
angular.module('<%= scriptAppName %>')
4-
.controller('LoginCtrl', function ($scope, Auth, $location<% if (filters.oauth) { %>, $window<% } %>) {
4+
.controller('LoginCtrl', function ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if (filters.oauth) { %>, $window<% } %>) {
55
$scope.user = {};
66
$scope.errors = {};
77

@@ -15,7 +15,7 @@ angular.module('<%= scriptAppName %>')
1515
})
1616
.then( function() {
1717
// Logged in, redirect to home
18-
$location.path('/');
18+
<% if(filters.ngroute) { %>$location.path('/');<% } %><% if(filters.uirouter) { %>$state.go('main');<% } %>
1919
})
2020
.catch( function(err) {
2121
$scope.errors.other = err.message;

‎app/templates/client/app/account(auth)/signup/signup(html).html

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h1>Sign up</h1>
5858
<button class="btn btn-inverse btn-lg btn-login" type="submit">
5959
Sign up
6060
</button>
61-
<a class="btn btn-default btn-lg btn-register" href="/login">
61+
<a class="btn btn-default btn-lg btn-register" <% if(filters.uirouter) { %>ui-sref="login"<% } else { %>href="/login"<% } %>>
6262
Login
6363
</a>
6464
</div>

‎app/templates/client/app/account(auth)/signup/signup(jade).jade

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ div(ng-include='"components/navbar/navbar.html"')
3636
button.btn.btn-inverse.btn-lg.btn-login(type='submit')
3737
| Sign up
3838
= ' '
39-
a.btn.btn-default.btn-lg.btn-register(href='/login')
39+
a.btn.btn-default.btn-lg.btn-register(<% if(filters.uirouter) { %>ui-sref='login'<% } else { %>href='/login'<% } %>)
4040
| Login
4141

4242
<% if(filters.oauth) {%>

‎app/templates/client/app/account(auth)/signup/signup.controller(coffee).coffee

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict'
22

33
angular.module '<%= scriptAppName %>'
4-
.controller 'SignupCtrl', ($scope, Auth, $location<% if(filters.oauth) {%>, $window<% } %>) ->
4+
.controller 'SignupCtrl', ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if(filters.oauth) {%>, $window<% } %>) ->
55
$scope.user = {}
66
$scope.errors = {}
77
$scope.register = (form) ->
@@ -15,7 +15,7 @@ angular.module '<%= scriptAppName %>'
1515
password: $scope.user.password
1616

1717
.then ->
18-
$location.path '/'
18+
<% if(filters.ngroute) { %>$location.path '/'<% } %><% if(filters.uirouter) { %>$state.go 'main'<% } %>
1919

2020
.catch (err) ->
2121
err = err.data

‎app/templates/client/app/account(auth)/signup/signup.controller(js).js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use strict';
22

33
angular.module('<%= scriptAppName %>')
4-
.controller('SignupCtrl', function ($scope, Auth, $location<% if (filters.oauth) { %>, $window<% } %>) {
4+
.controller('SignupCtrl', function ($scope, Auth<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %><% if (filters.oauth) { %>, $window<% } %>) {
55
$scope.user = {};
66
$scope.errors = {};
77

@@ -16,7 +16,7 @@ angular.module('<%= scriptAppName %>')
1616
})
1717
.then( function() {
1818
// Account created, redirect to home
19-
$location.path('/');
19+
<% if(filters.ngroute) { %>$location.path('/');<% } %><% if(filters.uirouter) { %>$state.go('main');<% } %>
2020
})
2121
.catch( function(err) {
2222
err = err.data;

‎app/templates/client/app/app(coffee).coffee

+6-5
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@ angular.module '<%= scriptAppName %>', [<%= angularModules %>]
1515
$locationProvider.html5Mode true<% if(filters.auth) { %>
1616
$httpProvider.interceptors.push 'authInterceptor'<% } %>
1717
<% } %><% if(filters.auth) { %>
18-
.factory 'authInterceptor', ($rootScope, $q, $cookieStore, $location) ->
19-
# Add authorization token to headers
18+
.factory 'authInterceptor', ($rootScope, $q, $cookieStore<% if(filters.ngroute) { %>, $location<% } if(filters.uirouter) { %>, $injector<% } %>) ->
19+
<% if(filters.uirouter) { %>state = null
20+
<% } %># Add authorization token to headers
2021
request: (config) ->
2122
config.headers = config.headers or {}
2223
config.headers.Authorization = 'Bearer ' + $cookieStore.get 'token' if $cookieStore.get 'token'
@@ -25,15 +26,15 @@ angular.module '<%= scriptAppName %>', [<%= angularModules %>]
2526
# Intercept 401s and redirect you to login
2627
responseError: (response) ->
2728
if response.status is 401
28-
$location.path '/login'
29+
<% if(filters.ngroute) { %>$location.path '/login'<% } if(filters.uirouter) { %>(state || state = $injector.get '$state').go 'login'<% } %>
2930
# remove any stale tokens
3031
$cookieStore.remove 'token'
3132

3233
$q.reject response
3334

34-
.run ($rootScope, $location, Auth) ->
35+
.run ($rootScope<% if(filters.ngroute) { %>, $location<% } %><% if(filters.uirouter) { %>, $state<% } %>, Auth) ->
3536
# Redirect to login if route requires auth and you're not logged in
3637
$rootScope.$on <% if(filters.ngroute) { %>'$routeChangeStart'<% } %><% if(filters.uirouter) { %>'$stateChangeStart'<% } %>, (event, next) ->
3738
Auth.isLoggedIn (loggedIn) ->
38-
$location.path "/login" if next.authenticate and not loggedIn
39+
<% if(filters.ngroute) { %>$location.path '/login'<% } %><% if(filters.uirouter) { %>$state.go 'login'<% } %> if next.authenticate and not loggedIn
3940
<% } %>

‎app/templates/client/app/app(js).js

+8-7
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,17 @@ angular.module('<%= scriptAppName %>', [<%= angularModules %>])
99

1010
$locationProvider.html5Mode(true);<% if(filters.auth) { %>
1111
$httpProvider.interceptors.push('authInterceptor');<% } %>
12-
})<% } %><% if(filters.uirouter) { %>.config(function ($stateProvider, $urlRouterProvider, $locationProvider<% if(filters.auth) { %>, $httpProvider<% } %>) {
12+
})<% } if(filters.uirouter) { %>.config(function ($stateProvider, $urlRouterProvider, $locationProvider<% if(filters.auth) { %>, $httpProvider<% } %>) {
1313
$urlRouterProvider
1414
.otherwise('/');
1515

1616
$locationProvider.html5Mode(true);<% if(filters.auth) { %>
1717
$httpProvider.interceptors.push('authInterceptor');<% } %>
18-
})<% } %><% if(filters.auth) { %>
18+
})<% } if(filters.auth) { %>
1919

20-
.factory('authInterceptor', function ($rootScope, $q, $cookieStore, $location) {
21-
return {
20+
.factory('authInterceptor', function ($rootScope, $q, $cookieStore<% if(filters.ngroute) { %>, $location<% } if(filters.uirouter) { %>, $injector<% } %>) {
21+
<% if(filters.uirouter) { %>var state;
22+
<% } %>return {
2223
// Add authorization token to headers
2324
request: function (config) {
2425
config.headers = config.headers || {};
@@ -31,7 +32,7 @@ angular.module('<%= scriptAppName %>', [<%= angularModules %>])
3132
// Intercept 401s and redirect you to login
3233
responseError: function(response) {
3334
if(response.status === 401) {
34-
$location.path('/login');
35+
<% if(filters.ngroute) { %>$location.path('/login');<% } if(filters.uirouter) { %>(state || (state = $injector.get('$state'))).go('login');<% } %>
3536
// remove any stale tokens
3637
$cookieStore.remove('token');
3738
return $q.reject(response);
@@ -43,12 +44,12 @@ angular.module('<%= scriptAppName %>', [<%= angularModules %>])
4344
};
4445
})
4546

46-
.run(function ($rootScope, $location, Auth) {
47+
.run(function ($rootScope<% if(filters.ngroute) { %>, $location<% } if(filters.uirouter) { %>, $state<% } %>, Auth) {
4748
// Redirect to login if route requires auth and you're not logged in
4849
$rootScope.$on(<% if(filters.ngroute) { %>'$routeChangeStart'<% } %><% if(filters.uirouter) { %>'$stateChangeStart'<% } %>, function (event, next) {
4950
Auth.isLoggedIn(function(loggedIn) {
5051
if (next.authenticate && !loggedIn) {
51-
$location.path('/login');
52+
<% if(filters.ngroute) { %>$location.path('/login');<% } if(filters.uirouter) { %>$state.go('login');<% } %>
5253
}
5354
});
5455
});

‎app/templates/client/app/main/main.controller.spec(coffee).coffee

+8-5
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,29 @@
33
describe 'Controller: MainCtrl', ->
44

55
# load the controller's module
6-
beforeEach module '<%= scriptAppName %>' <% if(filters.socketio) {%>
6+
beforeEach module '<%= scriptAppName %>' <% if(filters.uirouter) {%>
7+
beforeEach module 'stateMock' <% } %><% if(filters.socketio) {%>
78
beforeEach module 'socketMock' <% } %>
89

910
MainCtrl = undefined
10-
scope = undefined
11+
scope = undefined<% if(filters.uirouter) {%>
12+
state = undefined<% } %>
1113
$httpBackend = undefined
1214

1315
# Initialize the controller and a mock scope
14-
beforeEach inject (_$httpBackend_, $controller, $rootScope) ->
16+
beforeEach inject (_$httpBackend_, $controller, $rootScope<% if(filters.uirouter) {%>, $state<% } %>) ->
1517
$httpBackend = _$httpBackend_
1618
$httpBackend.expectGET('/api/things').respond [
1719
'HTML5 Boilerplate'
1820
'AngularJS'
1921
'Karma'
2022
'Express'
2123
]
22-
scope = $rootScope.$new()
24+
scope = $rootScope.$new()<% if(filters.uirouter) {%>
25+
state = $state<% } %>
2326
MainCtrl = $controller 'MainCtrl',
2427
$scope: scope
2528

2629
it 'should attach a list of things to the scope', ->
2730
$httpBackend.flush()
28-
expect(scope.awesomeThings.length).toBe 4
31+
expect(scope.awesomeThings.length).toBe 4

‎app/templates/client/app/main/main.controller.spec(js).js

+7-4
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,23 @@
33
describe('Controller: MainCtrl', function () {
44

55
// load the controller's module
6-
beforeEach(module('<%= scriptAppName %>'));<% if(filters.socketio) {%>
6+
beforeEach(module('<%= scriptAppName %>'));<% if(filters.uirouter) {%>
7+
beforeEach(module('stateMock'));<% } %><% if(filters.socketio) {%>
78
beforeEach(module('socketMock'));<% } %>
89

910
var MainCtrl,
10-
scope,
11+
scope,<% if(filters.uirouter) {%>
12+
state,<% } %>
1113
$httpBackend;
1214

1315
// Initialize the controller and a mock scope
14-
beforeEach(inject(function (_$httpBackend_, $controller, $rootScope) {
16+
beforeEach(inject(function (_$httpBackend_, $controller, $rootScope<% if(filters.uirouter) {%>, $state<% } %>) {
1517
$httpBackend = _$httpBackend_;
1618
$httpBackend.expectGET('/api/things')
1719
.respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
1820

19-
scope = $rootScope.$new();
21+
scope = $rootScope.$new();<% if(filters.uirouter) {%>
22+
state = $state;<% } %>
2023
MainCtrl = $controller('MainCtrl', {
2124
$scope: scope
2225
});

‎app/templates/client/components/navbar/navbar(html).html

+7-7
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@
1111
</div>
1212
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
1313
<ul class="nav navbar-nav">
14-
<li ng-repeat="item in menu" ng-class="{active: isActive(item.link)}">
15-
<a ng-href="{{item.link}}">{{item.title}}</a>
14+
<li ng-repeat="item in menu" <% if(filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive(item.link)}"<% } %>>
15+
<a <% if(filters.uirouter) { %>ui-sref="{{item.state}}"<% } else { %>ng-href="{{item.link}}"<% } %>>{{item.title}}</a>
1616
</li><% if(filters.auth) { %>
17-
<li ng-show="isAdmin()" ng-class="{active: isActive('/admin')}"><a href="/admin">Admin</a></li><% } %>
17+
<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><% } %>
1818
</ul><% if(filters.auth) { %>
1919

2020
<ul class="nav navbar-nav navbar-right">
21-
<li ng-hide="isLoggedIn()" ng-class="{active: isActive('/signup')}"><a href="/signup">Sign up</a></li>
22-
<li ng-hide="isLoggedIn()" ng-class="{active: isActive('/login')}"><a href="/login">Login</a></li>
21+
<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>
22+
<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>
2323
<li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p> </li>
24-
<li ng-show="isLoggedIn()" ng-class="{active: isActive('/settings')}"><a href="/settings"><span class="glyphicon glyphicon-cog"></span></a></li>
25-
<li ng-show="isLoggedIn()" ng-class="{active: isActive('/logout')}"><a href="" ng-click="logout()">Logout</a></li>
24+
<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>
25+
<li ng-show="isLoggedIn()"><a <% if(filters.uirouter) { %>ui-sref="logout"<% } else { %>href="/logout"<% } %>>Logout</a></li>
2626
</ul><% } %>
2727
</div>
2828
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.