Skip to content

Commit 2fa07ec

Browse files
committed
fix(gen:app:navbar): improve navbar component when using ui-router
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 `$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) closes angular-fullstack#436
1 parent 0351a44 commit 2fa07ec

File tree

4 files changed

+24
-24
lines changed

4 files changed

+24
-24
lines changed

Diff for: 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 href="" ng-click="logout()">Logout</a></li>
2626
</ul><% } %>
2727
</div>
2828
</div>

Diff for: app/templates/client/components/navbar/navbar(jade).jade

+11-11
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,25 @@ div.navbar.navbar-default.navbar-static-top(ng-controller='NavbarCtrl')
1010

1111
div#navbar-main.navbar-collapse.collapse(collapse='isCollapsed')
1212
ul.nav.navbar-nav
13-
li(ng-repeat='item in menu', ng-class='{active: isActive(item.link)}')
14-
a(ng-href='{{item.link}}') {{item.title}}<% if(filters.auth) { %>
13+
li(ng-repeat='item in menu', <% if(filters.uirouter) { %>ui-sref-active='active'<% } else { %>ng-class='{active: isActive(item.link)}'<% } %>)
14+
a(<% if(filters.uirouter) { %>ui-sref='{{item.state}}'<% } else { %>ng-href='{{item.link}}'<% } %>) {{item.title}}<% if(filters.auth) { %>
1515

16-
li(ng-show='isAdmin()', ng-class='{active: isActive("/admin")}')
17-
a(href='/admin') Admin<% } %><% if(filters.auth) { %>
16+
li(ng-show='isAdmin()', <% if(filters.uirouter) { %>ui-sref-active='active'<% } else { %>ng-class='{active: isActive("/admin")}'<% } %>)
17+
a(<% if(filters.uirouter) { %>ui-sref='admin'<% } else { %>href='/admin'<% } %>) Admin
1818

1919
ul.nav.navbar-nav.navbar-right
20-
li(ng-hide='isLoggedIn()', ng-class='{active: isActive("/signup")}')
21-
a(href='/signup') Sign up
20+
li(ng-hide='isLoggedIn()', <% if(filters.uirouter) { %>ui-sref-active='active'<% } else { %>ng-class='{active: isActive("/signup")}'<% } %>)
21+
a(<% if(filters.uirouter) { %>ui-sref='signup'<% } else { %>href='/signup'<% } %>) Sign up
2222

23-
li(ng-hide='isLoggedIn()', ng-class='{active: isActive("/login")}')
24-
a(href='/login') Login
23+
li(ng-hide='isLoggedIn()', <% if(filters.uirouter) { %>ui-sref-active='active'<% } else { %>ng-class='{active: isActive("/login")}'<% } %>)
24+
a(<% if(filters.uirouter) { %>ui-sref='login'<% } else { %>href='/login'<% } %>) Login
2525

2626
li(ng-show='isLoggedIn()')
2727
p.navbar-text Hello {{ getCurrentUser().name }}
2828

29-
li(ng-show='isLoggedIn()', ng-class='{active: isActive("/settings")}')
30-
a(href='/settings')
29+
li(ng-show='isLoggedIn()', <% if(filters.uirouter) { %>ui-sref-active='active'<% } else { %>ng-class='{active: isActive("/settings")}'<% } %>)
30+
a(<% if(filters.uirouter) { %>ui-sref='settings'<% } else { %>href='/settings'<% } %>)
3131
span.glyphicon.glyphicon-cog
3232

33-
li(ng-show='isLoggedIn()', ng-class='{active: isActive("/logout")}')
33+
li(ng-show='isLoggedIn()')
3434
a(href='', ng-click='logout()') Logout<% } %>

Diff for: app/templates/client/components/navbar/navbar.controller(coffee).coffee

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ angular.module '<%= scriptAppName %>'
44
.controller 'NavbarCtrl', ($scope, $location<% if(filters.auth) {%>, Auth<% } %>) ->
55
$scope.menu = [
66
title: 'Home'
7-
link: '/'
7+
<% if(filters.uirouter) { %>state: 'main'<% } else { %>link: '/'<% } %>
88
]
99
$scope.isCollapsed = true<% if(filters.auth) {%>
1010
$scope.isLoggedIn = Auth.isLoggedIn
@@ -13,7 +13,7 @@ angular.module '<%= scriptAppName %>'
1313

1414
$scope.logout = ->
1515
Auth.logout()
16-
$location.path '/login'<% } %>
16+
$location.path '/login'<% } %><% if(!filters.uirouter) { %>
1717

1818
$scope.isActive = (route) ->
19-
route is $location.path()
19+
route is $location.path()<% } %>

Diff for: app/templates/client/components/navbar/navbar.controller(js).js

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ angular.module('<%= scriptAppName %>')
44
.controller('NavbarCtrl', function ($scope, $location<% if(filters.auth) {%>, Auth<% } %>) {
55
$scope.menu = [{
66
'title': 'Home',
7-
'link': '/'
7+
<% if(filters.uirouter) { %>'state': 'main'<% } else { %>'link': '/'<% } %>
88
}];
99

1010
$scope.isCollapsed = true;<% if(filters.auth) {%>
@@ -15,9 +15,9 @@ angular.module('<%= scriptAppName %>')
1515
$scope.logout = function() {
1616
Auth.logout();
1717
$location.path('/login');
18-
};<% } %>
18+
};<% } %><% if(!filters.uirouter) { %>
1919

2020
$scope.isActive = function(route) {
2121
return route === $location.path();
22-
};
22+
};<% } %>
2323
});

0 commit comments

Comments
 (0)