Refactored examples

Author: tarlepp

app/components/examples/examples.ts

@@ -1,20 +1,27 @@
+// Angular2 specified stuff
 import {Component, ViewEncapsulation} from 'angular2/core';
-import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
-import {NavigationCmp} from './navigation';
+import {RouteConfig, ROUTER_DIRECTIVES, CanActivate} from 'angular2/router';
+
+// 3rd party libraries
+import {tokenNotExpired} from 'angular2-jwt/angular2-jwt';
 
-import {AuthorCmp} from './author/author';
-import {BookCmp} from './book/book';
+// Component specified stuff
+import {NavigationCmp} from './navigation';
+import {Routes} from './routes';
 
+// Component setup
 @Component({
   selector: 'examples',
   templateUrl: './components/examples/examples.html',
   encapsulation: ViewEncapsulation.None,
   directives: [ROUTER_DIRECTIVES, NavigationCmp]
 })
 
-@RouteConfig([
-  {path: '/author', component: AuthorCmp, name: 'Author'},
-  {path: '/book', component: BookCmp, name: 'Book'}
-])
+// Specify component routes
+@RouteConfig(Routes.get())
+
+// This is protected component, so check that user has valid JWT
+@CanActivate(() => tokenNotExpired())
 
+// Actual component class
 export class ExamplesCmp {}

app/components/examples/navigation.ts

@@ -1,20 +1,29 @@
+// Angular2 specified stuff
 import {Component} from 'angular2/core';
 import {CORE_DIRECTIVES} from 'angular2/common';
 import {ROUTER_DIRECTIVES, Location} from 'angular2/router';
 
+// Component setup
 @Component({
   selector: 'navigation-component',
   templateUrl: './components/examples/navigation.html',
   directives: [CORE_DIRECTIVES, ROUTER_DIRECTIVES]
 })
 
+// Actual component class
 export class NavigationCmp {
   constructor(
     private _location: Location
   ) {}
 
-  isActive(item): boolean {
-    let regExp = new RegExp(item, 'gi');
+  /**
+   * Function to check if specified path is active or not.
+   *
+   * @param   {string}  path
+   * @returns {boolean}
+   */
+  isActive(path: string): boolean {
+    let regExp = new RegExp(path, 'gi');
 
     return !!this._location.path().match(regExp);
   }

app/components/examples/routes.ts

@@ -0,0 +1,14 @@
+// Route components
+import {AuthorCmp} from './author/author';
+import {BookCmp} from './book/book';
+
+export class Routes {
+  static items = [
+      {path: '/author', component: AuthorCmp, name: 'Author'},
+      {path: '/book', component: BookCmp, name: 'Book'}
+    ];
+
+  static get(): any[] {
+    return Routes.items;
+  }
+}