Skip to content

Commit 02773df

Browse files
Awk34Awk34
committed
refactor(navbar): controller as, ES7 class
1 parent f016415 commit 02773df

File tree

4 files changed

+49
-42
lines changed

4 files changed

+49
-42
lines changed

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarCtrl">
1+
<div class="navbar navbar-default navbar-static-top" ng-controller="NavbarController">
22
<div class="container">
33
<div class="navbar-header">
4-
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
4+
<button class="navbar-toggle" type="button" ng-click="vm.isCollapsed = !vm.isCollapsed">
55
<span class="sr-only">Toggle navigation</span>
66
<span class="icon-bar"></span>
77
<span class="icon-bar"></span>
88
<span class="icon-bar"></span>
99
</button>
1010
<a href="/" class="navbar-brand"><%= lodash.slugify(lodash.humanize(appname)) %></a>
1111
</div>
12-
<div collapse="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
12+
<div collapse="vm.isCollapsed" class="navbar-collapse collapse" id="navbar-main">
1313
<ul class="nav navbar-nav">
14-
<li ng-repeat="item in menu" <% if (filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: isActive(item.link)}"<% } %>>
14+
<li ng-repeat="item in vm.menu" <% if (filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: vm.isActive(item.link)}"<% } %>>
1515
<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()" <% 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><% } %>
17+
<li ng-show="vm.isAdmin()" <% if (filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: vm.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()" <% 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>
23-
<li ng-show="isLoggedIn()"><p class="navbar-text">Hello {{ getCurrentUser().name }}</p> </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>
21+
<li ng-hide="vm.isLoggedIn()" <% if (filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: vm.isActive('/signup')}"<% } %>><a <% if (filters.uirouter) { %>ui-sref="signup"<% } else { %>href="/signup"<% } %>>Sign up</a></li>
22+
<li ng-hide="vm.isLoggedIn()" <% if (filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: vm.isActive('/login')}"<% } %>><a <% if (filters.uirouter) { %>ui-sref="login"<% } else { %>href="/login"<% } %>>Login</a></li>
23+
<li ng-show="vm.isLoggedIn()"><p class="navbar-text">Hello {{ vm.getCurrentUser().name }}</p> </li>
24+
<li ng-show="vm.isLoggedIn()" <% if (filters.uirouter) { %>ui-sref-active="active"<% } else { %>ng-class="{active: vm.isActive('/settings')}"<% } %>><a <% if (filters.uirouter) { %>ui-sref="settings"<% } else { %>href="/settings"<% } %>><span class="glyphicon glyphicon-cog"></span></a></li>
25+
<li ng-show="vm.isLoggedIn()"><a <% if (filters.uirouter) { %>ui-sref="logout"<% } else { %>href="/logout"<% } %>>Logout</a></li>
2626
</ul><% } %>
2727
</div>
2828
</div>

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
div.navbar.navbar-default.navbar-static-top(ng-controller='NavbarCtrl')
1+
div.navbar.navbar-default.navbar-static-top(ng-controller='NavbarController')
22
div.container
33
div.navbar-header
4-
button.navbar-toggle(type='button', ng-click='isCollapsed = !isCollapsed')
4+
button.navbar-toggle(type='button', ng-click='vm.isCollapsed = !vm.isCollapsed')
55
span.sr-only Toggle navigation
66
span.icon-bar
77
span.icon-bar
88
span.icon-bar
99
a.navbar-brand(href='/') <%= lodash.slugify(lodash.humanize(appname)) %>
1010

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

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

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

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

26-
li(ng-show='isLoggedIn()')
27-
p.navbar-text Hello {{ getCurrentUser().name }}
26+
li(ng-show='vm.isLoggedIn()')
27+
p.navbar-text Hello {{ vm.getCurrentUser().name }}
2828

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

33-
li(ng-show='isLoggedIn()')
33+
li(ng-show='vm.isLoggedIn()')
3434
a(<% if (filters.uirouter) { %>ui-sref='logout'<% } else { %>href='/logout'<% } %>) Logout<% } %>

‎app/templates/client/components/navbar/navbar.controller.js‎

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
11
'use strict';
22

3-
angular.module('<%= scriptAppName %>')
4-
.controller('NavbarCtrl', function ($scope<% if(!filters.uirouter) { %>, $location<% } %><% if (filters.auth) {%>, Auth<% } %>) {
5-
$scope.menu = [{
6-
'title': 'Home',
7-
<% if (filters.uirouter) { %>'state': 'main'<% } else { %>'link': '/'<% } %>
8-
}];
3+
class NavbarController {
4+
//start-non-standard
5+
menu = [{
6+
'title': 'Home',
7+
<% if (filters.uirouter) { %>'state': 'main'<% } else { %>'link': '/'<% } %>
8+
}];
9+
10+
isCollapsed = true;
11+
//end-non-standard
912

10-
$scope.isCollapsed = true;<% if (filters.auth) {%>
11-
$scope.isLoggedIn = Auth.isLoggedIn;
12-
$scope.isAdmin = Auth.isAdmin;
13-
$scope.getCurrentUser = Auth.getCurrentUser;<% } %><% if(!filters.uirouter) { %>
13+
constructor(<% if(!filters.uirouter) { %>$location<% } %><% if (filters.auth) { %>Auth<% } %>) {<% if(!filters.uirouter) { %>
14+
this.$location = $location;<% } %>
15+
<% if (filters.auth) { %>this.isLoggedIn = Auth.isLoggedIn;
16+
this.isAdmin = Auth.isAdmin;
17+
this.getCurrentUser = Auth.getCurrentUser;
18+
<% } %>}<% if(!filters.uirouter) { %>
1419

15-
$scope.isActive = function(route) {
16-
return route === $location.path();
17-
};<% } %>
18-
});
20+
isActive(route) {
21+
return route === this.$location.path();
22+
}<% } %>
23+
}
24+
25+
angular.module('<%= scriptAppName %>')
26+
.controller('NavbarController', NavbarController);

‎app/templates/client/components/navbar/navbar.directive.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
'use strict';
22

33
angular.module('<%= scriptAppName %>')
4-
.directive('navbar', function () {
5-
return {
6-
templateUrl: 'components/navbar/navbar.html',
7-
restrict: 'E',
8-
controller: 'NavbarCtrl'
9-
};
10-
});
4+
.directive('navbar', () => ({
5+
templateUrl: 'components/navbar/navbar.html',
6+
restrict: 'E',
7+
controller: 'NavbarController',
8+
controllerAs: 'vm'
9+
}));

0 commit comments

Comments
 (0)