ISSUE-100: Add lazy loading of modules

ng-client/package.json

@@ -28,7 +28,7 @@
     "hammerjs": "2.0.8",
     "moment": "2.17.1",
     "rxjs": "5.1.0",
-    "zone.js": "0.8.4"
+    "zone.js": "0.8.5"
   },
   "devDependencies": {
     "@angular/cli": "1.0.0",

ng-client/src/app/app-routing.module.ts

@@ -7,17 +7,26 @@ import {
 import { PageNotFoundComponent } from './core/not-found.component';
 
 const appRoutes: Routes = [
+  {
+    path: 'employees',
+    loadChildren: './employee/employee.module#EmployeeModule',
+  },
+  {
+    path: 'projects',
+    loadChildren: './project/project.module#ProjectModule',
+  },
   {
     path: '',
     redirectTo: '/projects',
-    pathMatch: 'full'
+    pathMatch: 'full',
   },
   { path: '**', component: PageNotFoundComponent },
 ];
 @NgModule({
   imports: [
     RouterModule.forRoot(appRoutes)
   ],
+  declarations: [ PageNotFoundComponent ],
   exports: [
     RouterModule
   ]

ng-client/src/app/app.component.html

@@ -1,2 +1 @@
 <at-navigation></at-navigation>
-<router-outlet></router-outlet>

ng-client/src/app/app.module.ts

@@ -1,29 +1,19 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { HttpModule } from '@angular/http';
-import { FormsModule } from '@angular/forms';
+import { NgModule } from '@angular/core';
+import { MaterialModule } from '@angular/material';
 
 import {
   Router
 } from '@angular/router';
 
-// import { routing } from './app.routes';
-
 import { AppComponent } from './app.component';
-import { ProjectModule } from './project';
-import { EmployeeModule } from './employee/';
 import { CoreModule } from './core';
 
-import 'hammerjs';
-
-import { MaterialModule } from '@angular/material';
-
 import { ExtHttpConfig } from './core/ExtHttpConfig';
 
 import { AppRoutingModule } from './app-routing.module';
 import { LoginComponent } from './core/login.component';
 import { LoginRoutingModule } from './core/login-routing.module';
-import { PageNotFoundComponent } from './core/not-found.component';
 import { NavigationComponent } from './core/navigation.component';
 import { TimesheetModule } from './timesheet/timesheet.module';
 
@@ -41,24 +31,18 @@ const extHttpConfig = {
 @NgModule({
   imports: [
     BrowserModule,
-    MaterialModule,
-    HttpModule,
-    FormsModule,
     CoreModule.forRoot(extHttpConfig),
-    EmployeeModule,
-    ProjectModule,
     TimesheetModule,
     LoginRoutingModule,
     AppRoutingModule,
+    MaterialModule.forRoot(),
   ],
   declarations: [
     AppComponent,
     LoginComponent,
-    PageNotFoundComponent,
     NavigationComponent,
   ],
   bootstrap: [ AppComponent ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
 })
 export class AppModule {
   // Diagnostic only: inspect router configuration

ng-client/src/app/core/auth-guard.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  Router
+} from '@angular/router';
+
+import { IdentityService } from './identity.service';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+  constructor(private identityService: IdentityService, private router: Router) { }
+
+  canActivate() {
+    const isAuthenticated = this.identityService.user.authenticated;
+
+    if (isAuthenticated) {
+      return true;
+    } else {
+      // The original URL that the user intends to access is not stored by this approach.
+      this.router.navigate(['/login']);
+      return false;
+    }
+  }
+}

ng-client/src/app/core/core.module.ts

@@ -2,30 +2,43 @@ import {
   NgModule,
   ModuleWithProviders
 } from '@angular/core';
+import { HttpModule } from '@angular/http';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { MaterialModule } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
+import 'hammerjs';
+
 import { IdentityService } from './identity.service';
 import { LocalStorage } from './localStorage';
 import { LoginService } from './login.service';
 import { ResponseHandler } from './responseHandler.service';
 import { ExtHttp } from './extHttp.service';
 import { ExtHttpConfig } from './ExtHttpConfig';
+import { AuthGuard } from './auth-guard.service';
+import { ProjectService } from '../project/project.service';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     BrowserAnimationsModule,
+    HttpModule,
+  ],
+  exports: [
+    CommonModule,
+    FormsModule,
+    BrowserAnimationsModule,
+    HttpModule,
   ],
   providers: [
     ExtHttp,
     IdentityService,
     LocalStorage,
     LoginService,
     ResponseHandler,
+    AuthGuard,
+    ProjectService,
   ]
 })
 export class CoreModule {

ng-client/src/app/core/login.component.ts

@@ -13,9 +13,8 @@ import {
 } from '../core';
 
 @Component({
-  selector: 'at-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
 })
 export class LoginComponent implements OnInit {
   error: boolean;

ng-client/src/app/core/navigation.component.html

@@ -1,21 +1,43 @@
-<div class="nav-toolbar">
-  <md-toolbar color="primary">
-    Angular Timesheets
+<div class="main-container">
+    <div class="nav-toolbar">
+    <md-toolbar color="primary">
+      <button md-icon-button (click)="sidenav.toggle()" *ngIf="user.authenticated">
+        <md-icon>menu</md-icon>
+      </button>
+      Angular Timesheets
 
-    <span class="nav-fill-remaining"></span>
+      <span class="nav-fill-remaining"></span>
+      <ng-container *ngIf="user.authenticated">
+        <span>{{user?.name.first}} {{user?.name.last}}</span>
+        <button md-icon-button [mdMenuTriggerFor]="menu">
+          <md-icon>more_vert</md-icon>
+        </button>
+        <md-menu #menu="mdMenu">
+          <button md-menu-item (click)="logout()">
+            <md-icon>exit_to_app</md-icon>
+            <span>Logout</span>
+          </button>
+        </md-menu>
+      </ng-container>
+    </md-toolbar>
+  </div>
+<md-sidenav-container class="side-nav-container">
+  <md-sidenav #sidenav class="side-nav-content" mode="side">
+    <ul class="side-nav-items">
+      <li class="side-nav-item">
+        <a routerLink="/projects">Projects</a>
+      </li>
+      <li class="side-nav-item">
+        <a routerLink="/timesheets">Timesheets</a>
+      </li>
+      <li class="side-nav-item">
+        <a routerLink="/employees">Employees</a>
+      </li>
+    </ul>
+  </md-sidenav>
 
-    <span>{{user.name.first}} {{user.name.last}}</span>
-    <button md-icon-button [mdMenuTriggerFor]="menu">
-      <md-icon>more_vert</md-icon>
-    </button>
-    <md-menu #menu="mdMenu">
-      <button md-menu-item (click)="logout()">
-        <md-icon>exit_to_app</md-icon>
-        <span>Logout</span>
-      </button>
-    </md-menu>
-  </md-toolbar>
-</div>
-<div class="main-container">
-  <router-outlet></router-outlet>
+  <div class="example-sidenav-content">
+    <router-outlet></router-outlet>
+  </div>
+</md-sidenav-container>
 </div>

ng-client/src/app/core/navigation.component.scss

@@ -3,3 +3,33 @@
     flex: 1 1 auto;
   }
 }
+
+.side-nav-content {
+  box-shadow: 3px 0 6px rgba(0,0,0,.24);
+  width: 200px;
+}
+
+.side-nav-items {
+  margin: 0;
+  padding: 0;
+}
+.side-nav-item {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: rgba(0,0,0,.06);
+}
+
+.side-nav-item:last-child {
+  border-color: transparent;
+}
+
+.side-nav-item > a {
+  color: rgba(0,0,0,.54);
+  display: block;
+  padding: 1.5em;
+  text-decoration: none;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+}

ng-client/src/app/employee/employee-list/employee-list.component.ts

@@ -7,7 +7,6 @@ import { Employee } from '../Employee';
 import { EmployeeService } from '../employee.service';
 
 @Component({
-  selector: 'at-employee-list',
   templateUrl: './employee-list.component.html',
   styleUrls: ['./employee-list.component.scss'],
 })

ng-client/src/app/employee/employee-new/employee-new.component.ts

@@ -5,7 +5,6 @@ import { EmployeeService } from '../employee.service';
 import { Employee } from '../Employee';
 
 @Component({
-  selector: 'at-employee-new',
   templateUrl: './employee-new.component.html',
   styleUrls: ['./employee-new.component.scss']
 })

ng-client/src/app/employee/employee-root/employee-root.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

ng-client/src/app/employee/employee-root/employee-root.component.ts

@@ -0,0 +1,12 @@
+import {
+  Component,
+  OnInit
+} from '@angular/core';
+
+@Component({
+  templateUrl: './employee-root.component.html'
+})
+export class EmployeeRootComponent implements OnInit {
+  constructor() {}
+  ngOnInit() {}
+}

ng-client/src/app/employee/employee-routing.module.ts

@@ -4,18 +4,34 @@ import {
   RouterModule,
 } from '@angular/router';
 
+import { AuthGuard } from '../core/auth-guard.service';
+
+import { EmployeeRootComponent } from './employee-root/employee-root.component';
 import { EmployeeListComponent } from './employee-list/employee-list.component';
 import { EmployeeNewComponent } from './employee-new/employee-new.component';
 
 const employeeRoutes: Routes = [
-  { path: 'employees', component: EmployeeListComponent },
-  { path: 'employees/new', component: EmployeeNewComponent },
+  {
+    path: '',
+    component: EmployeeRootComponent,
+    canActivate: [ AuthGuard ],
+    children: [
+      {
+        path: '',
+        children: [
+          { path: '', component: EmployeeListComponent },
+          { path: 'new', component: EmployeeNewComponent },
+        ]
+      }
+    ]
+  },
 ];
 
 @NgModule({
   imports: [
     RouterModule.forChild(employeeRoutes)
   ],
+  declarations: [ EmployeeRootComponent ],
   exports: [
     RouterModule
   ]

ng-client/src/app/employee/employee.module.ts

@@ -1,9 +1,18 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { NgModule } from '@angular/core';
+
+import {
+  MdListModule,
+  MdIconModule,
+  MdInputModule,
+  MdOptionModule,
+  MdButtonModule,
+  MdCardModule,
+} from '@angular/material';
+
 import { EmployeeNewComponent } from './employee-new';
 import { EmployeeListComponent, EmployeeDirective } from './employee-list';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { MaterialModule } from '@angular/material';
 import { EmployeeService } from './employee.service';
 import { EmployeeRoutingModule } from './employee-routing.module';
 
@@ -16,13 +25,15 @@ import { EmployeeRoutingModule } from './employee-routing.module';
   imports: [
     CommonModule,
     FormsModule,
-    MaterialModule.forRoot(),
     EmployeeRoutingModule,
+    MdIconModule,
+    MdButtonModule,
+    MdCardModule,
+    MdInputModule,
   ],
   exports: [],
   providers: [
     EmployeeService
   ],
-  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
 })
 export class EmployeeModule { }

ng-client/src/app/project/project-list/project-list.component.ts

@@ -4,7 +4,6 @@ import { ProjectService } from '../project.service';
 import { Project } from '../Project';
 
 @Component({
-  selector: 'at-project-list',
   templateUrl: './project-list.component.html',
   styleUrls: ['./project-list.component.scss']
 })

ng-client/src/app/project/project-new/project-new.component.ts

@@ -5,7 +5,6 @@ import { ProjectService } from '../project.service';
 import { Project } from '../Project';
 
 @Component({
-  selector: 'at-project-new',
   templateUrl: './project-new.component.html',
   styleUrls: ['./project-new.component.scss']
 })

ng-client/src/app/project/project-root/project-root.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>