feat(client:navbar): complete angular router code

closes #2618

Author: Awk34

Diff for: templates/app/client/app/app.module.js

@@ -75,7 +75,7 @@ import { MainModule } from './main/main.module';
 import { MainComponent } from './main/main.component';
 import { DirectivesModule } from '../components/directives.module';
 import { AccountModule } from './account/account.module';
-//import { AdminModule } from './admin/admin.module';
+import { AdminModule } from './admin/admin.module';
 
 import constants from './app.constants';
 
@@ -125,7 +125,7 @@ const appRoutes: Routes = [
         MainModule,
         DirectivesModule,
         AccountModule,
-        //AdminModule,
+        AdminModule,
     ],
     declarations: [
         AppComponent,

Diff for: templates/app/client/components/directives.module.js

@@ -2,6 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CollapseModule } from 'ng2-bootstrap';
 
+<%_ if (filters.uirouter) { -%>
+import { UIRouterModule } from 'ui-router-ng2';<% } %>
+<%_ if (filters.ngroute) { -%>
+import { RouterModule } from '@angular/router';<% } %>
+
 import { AuthModule } from './auth/auth.module';
 
 import { NavbarComponent } from './navbar/navbar.component';
@@ -14,6 +19,10 @@ import { OauthButtonsComponent } from './oauth-buttons/oauth-buttons.component';
     CommonModule,
     CollapseModule,
     AuthModule,
+    <%_ if (filters.uirouter) { -%>
+    UIRouterModule,<% } %>
+    <%_ if (filters.ngroute) { -%>
+    RouterModule,<% } %>
   ],
   declarations: [
     NavbarComponent,

Diff for: templates/app/client/components/navbar/navbar.component.js

@@ -2,6 +2,8 @@ import { Component } from '@angular/core';
 <%_ if (filters.auth) { -%>
 <%_ if (filters.uirouter) { -%>
 import { StateService } from 'ui-router-ng2';<% } %>
+<%_ if (filters.ngroute) { -%>
+import { Router } from '@angular/router';<% } %>
 import { AuthService } from '../auth/auth.service';<% } %>
 
 @Component({
@@ -15,22 +17,24 @@ export class NavbarComponent {
   currentUser = {};
   menu = [{
     title: 'Home',
-    <% if(filters.uirouter) { %>'state': 'main'<% } else { %>'link': '/'<% } %>,
+    <% if(filters.uirouter) { %>'state': 'main'<% } else { %>'link': '/home'<% } %>,
   }];
   <%_ if(filters.auth) { -%>
 
-  static parameters = [AuthService<% if(filters.uirouter) { %>, StateService<% } %>];
-  constructor(authService: AuthService<% if(filters.uirouter) { %>, stateService: StateService<% } %>) {
+  static parameters = [AuthService<% if(filters.uirouter) { %>, StateService<% } else { %>, Router<% } %>];
+  constructor(authService: AuthService<% if(filters.uirouter) { %>, stateService: StateService<% } else { %>, router: Router<% } %>) {
     this.AuthService = authService;
-    <%_ if (filters.uirouter) { -%>
+    <%_ if(filters.uirouter) { -%>
     this.StateService = stateService;<% } %>
+    <%_ if(filters.ngroute) { -%>
+    this.Router = router;<% } %>
 
     this.reset();
 
     this.AuthService.currentUserChanged.subscribe(user => {
       this.currentuser = user;
       this.reset();
-    })
+    });
   }
 
   reset() {
@@ -47,9 +51,10 @@ export class NavbarComponent {
 
   logout() {
     let promise = this.AuthService.logout();
-    <%_ if (filters.uirouter) { -%>
+    <%_ if(filters.uirouter) { -%>
     this.StateService.go('login');<% } -%>
-    <%_ if (filters.ngroute) { -%><% } -%>
+    <%_ if(filters.ngroute) { -%>
+    this.Router.navigateByUrl('/home');<% } -%>
     return promise;
   }<% } -%>
 }

Diff for: templates/app/client/components/navbar/navbar.html

@@ -11,21 +11,21 @@
     </div>
     <div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
       <ul class="nav navbar-nav">
-        <li *ngFor="let item of menu" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>ng-class="{active: isActive(item.link)}"<% } %>>
-            <a <% if(filters.uirouter) { %>uiSref="{{item.state}}"<% } else { %>href="{{item.link}}"<% } %>>{{item.title}}</a>
+        <li *ngFor="let item of menu" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>>
+            <a <% if(filters.uirouter) { %>uiSref="{{item.state}}"<% } else { %>routerLink="{{item.link}}"<% } %>>{{item.title}}</a>
         </li>
         <%_ if(filters.auth) { -%>
-        <li [hidden]="!isAdmin" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>ng-class="{active: isActive('/admin')}"<% } %>>
-          <a <% if(filters.uirouter) { %>uiSref="admin"<% } else { %>href="/admin"<% } %>>Admin</a>
+        <li [hidden]="!isAdmin" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>>
+          <a <% if(filters.uirouter) { %>uiSref="admin"<% } else { %>routerLink="/admin"<% } %>>Admin</a>
         </li><% } %>
       </ul>
       <%_ if(filters.auth) { -%>
 
       <ul class="nav navbar-nav navbar-right">
-        <li [hidden]="isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>ng-class="{active: isActive('/signup')}"<% } %>><a <% if(filters.uirouter) { %>uiSref="signup"<% } else { %>href="/signup"<% } %>>Sign up</a></li>
-        <li [hidden]="isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>ng-class="{active: isActive('/login')}"<% } %>><a <% if(filters.uirouter) { %>uiSref="login"<% } else { %>href="/login"<% } %>>Login</a></li>
+        <li [hidden]="isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>><a <% if(filters.uirouter) { %>uiSref="signup"<% } else { %>routerLink="/signup"<% } %>>Sign up</a></li>
+        <li [hidden]="isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>><a <% if(filters.uirouter) { %>uiSref="login"<% } else { %>routerLink="/login"<% } %>>Login</a></li>
         <li [hidden]="!isLoggedIn"><p class="navbar-text">Hello {{ currentUser.name }}</p> </li>
-        <li [hidden]="!isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>ng-class="{active: isActive('/settings')}"<% } %>><a <% if(filters.uirouter) { %>uiSref="settings"<% } else { %>href="/settings"<% } %>><span class="glyphicon glyphicon-cog"></span></a></li>
+        <li [hidden]="!isLoggedIn" <% if(filters.uirouter) { %>uiSrefActive="active"<% } else { %>routerLinkActive="active"<% } %>><a <% if(filters.uirouter) { %>uiSref="settings"<% } else { %>routerLink="/settings"<% } %>><span class="glyphicon glyphicon-cog"></span></a></li>
         <li [hidden]="!isLoggedIn"><a (click)="logout()">Logout</a></li>
       </ul><% } %>
     </div>