Permalink
Browse files

Upgraded to angular rc3, material2 alpha.6 and new 3.0 router during …

…screencast.
  • Loading branch information...
1 parent 1038741 commit ebd79c13462a430407c6565bc38e74674b1f2096 @ajtowf committed Jul 4, 2016
Showing with 73 additions and 41 deletions.
  1. +1 −10 app/app.ts
  2. +23 −0 app/auth-guard.ts
  3. +5 −3 app/boot.ts
  4. +11 −10 app/components/about/about.ts
  5. +0 −2 app/components/profile/profile.ts
  6. +2 −2 app/components/todo/todo.html
  7. +15 −0 app/routes.ts
  8. +15 −14 package.json
  9. +1 −0 systemjs.config.js
View
@@ -1,13 +1,9 @@
import {Component, bind, NgZone} from '@angular/core';
-import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, Routes, Router} from '@angular/router';
+import {ROUTER_DIRECTIVES} from '@angular/router';
import {Location} from '@angular/common';
import {tokenNotExpired, JwtHelper} from 'angular2-jwt';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
-import { Todo } from './components/todo/todo';
-import { About } from './components/about/about';
-import { Profile } from './components/profile/profile';
-
import {MdToolbar} from '@angular2-material/toolbar';
declare var Auth0Lock;
@@ -18,11 +14,6 @@ declare var Auth0Lock;
styleUrls: ['./app/app.css'],
directives: [ROUTER_DIRECTIVES, MdToolbar]
})
-@Routes([
- { path: '/', component: Todo },
- { path: '/about/:id', component: About },
- { path: '/profile', component: Profile}
-])
export class AppComponent {
lock = new Auth0Lock('T1wdQrDposGW5BisaKViC0Cu9CuxtR0c', 'towfeek.eu.auth0.com');
jwtHelper: JwtHelper = new JwtHelper();
View
@@ -0,0 +1,23 @@
+import {tokenNotExpired} from 'angular2-jwt';
+import { Injectable } from '@angular/core';
+import {
+ CanActivate,
+ ActivatedRouteSnapshot,
+ RouterStateSnapshot,
+ Router
+} from '@angular/router';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+
+ constructor(private router: Router) {}
+
+ canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+ if (tokenNotExpired()) {
+ return true;
+ }
+
+ this.router.navigate(['']);
+ return false;
+ }
+}
View
@@ -2,19 +2,21 @@
import {bootstrap} from '@angular/platform-browser-dynamic';
import {bind, provide} from '@angular/core';
-import {ROUTER_PROVIDERS } from '@angular/router';
import { LocationStrategy, HashLocationStrategy} from '@angular/common';
import {AppComponent} from './app';
+import {APP_ROUTER_PROVIDER} from './routes';
import {HTTP_PROVIDERS, Http} from '@angular/http';
import {AuthHttp, AuthConfig} from 'angular2-jwt';
+import {AuthGuard} from './auth-guard';
bootstrap(AppComponent, [
HTTP_PROVIDERS,
- ROUTER_PROVIDERS,
+ APP_ROUTER_PROVIDER,
bind(LocationStrategy).toClass(HashLocationStrategy),
provide(AuthConfig, { useFactory: () => {
return new AuthConfig();
}}),
- AuthHttp
+ AuthHttp,
+ AuthGuard
]);
@@ -1,23 +1,24 @@
-import {Component} from '@angular/core';
-import { Router, RouteSegment, RouteTree, OnActivate } from '@angular/router';
+import {Component, OnInit} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'about',
template: `
Welcome to the about page! This is the ID: {{id}}
`
})
-export class About implements OnActivate {
+export class About implements OnInit {
id: string;
- constructor(private router: Router) {
+ constructor(private route: ActivatedRoute) {
}
- routerOnActivate(
- current: RouteSegment,
- prev?: RouteSegment,
- currTree?: RouteTree,
- prevTree?: RouteTree) {
- this.id = current.getParam('id');
+ ngOnInit() {
+ this.id = this.route.snapshot.params['id'];
+ this.route.params
+ .map(params => params['id'])
+ .subscribe(id => {
+ this.id = id;
+ });
}
}
@@ -1,5 +1,4 @@
import {Component, OnInit, OnDestroy, AfterContentInit} from '@angular/core';
-// import {CanActivate} from '@angular/router';
import {tokenNotExpired} from 'angular2-jwt';
import {AuthHttp} from 'angular2-jwt';
@@ -11,7 +10,6 @@ import {AuthHttp} from 'angular2-jwt';
{{quote}}
`
})
-// @CanActivate(() => tokenNotExpired())
export class Profile implements OnInit, OnDestroy, AfterContentInit {
profile: any;
quote: any;
@@ -9,13 +9,13 @@
</button>
</div>
- <form [ngFormModel]="myForm" (submit)="onSubmit()">
+ <!--<form [ngFormModel]="myForm" (submit)="onSubmit()">
<div>
<md-input required placeholder="What do you need to do?" [ngFormControl]="newTodo"></md-input>
</div>
<button md-raised-button color="primary" type="submit" [disabled]="!myForm.valid">Add Todo</button>
- </form>
+ </form>-->
<md-checkbox (change)="toggleAll($event)">
Mark all as complete
View
@@ -0,0 +1,15 @@
+import { provideRouter, RouterConfig } from '@angular/router';
+
+import { Todo } from './components/todo/todo';
+import { About } from './components/about/about';
+import { Profile } from './components/profile/profile';
+
+import { AuthGuard} from './auth-guard';
+
+export const appRoutes: RouterConfig = [
+ { path: '', component: Todo },
+ { path: 'about/:id', component: About },
+ { path: 'profile', component: Profile, canActivate:[AuthGuard]}
+];
+
+export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);
View
@@ -26,20 +26,21 @@
"typings": "^0.8.1"
},
"dependencies": {
- "@angular/common": "2.0.0-rc.1",
- "@angular/compiler": "2.0.0-rc.1",
- "@angular/core": "2.0.0-rc.1",
- "@angular/http": "2.0.0-rc.1",
- "@angular/platform-browser": "2.0.0-rc.1",
- "@angular/platform-browser-dynamic": "2.0.0-rc.1",
- "@angular/router": "2.0.0-rc.1",
- "@angular2-material/button": "2.0.0-alpha.4",
- "@angular2-material/card": "2.0.0-alpha.4",
- "@angular2-material/checkbox": "2.0.0-alpha.4",
- "@angular2-material/core": "2.0.0-alpha.4",
- "@angular2-material/input": "2.0.0-alpha.4",
- "@angular2-material/progress-circle": "2.0.0-alpha.4",
- "@angular2-material/toolbar": "2.0.0-alpha.4",
+ "@angular/common": "2.0.0-rc.3",
+ "@angular/compiler": "2.0.0-rc.3",
+ "@angular/core": "2.0.0-rc.3",
+ "@angular/forms": "^0.1.0",
+ "@angular/http": "2.0.0-rc.3",
+ "@angular/platform-browser": "2.0.0-rc.3",
+ "@angular/platform-browser-dynamic": "2.0.0-rc.3",
+ "@angular/router": "3.0.0-alpha.8",
+ "@angular2-material/button": "2.0.0-alpha.6",
+ "@angular2-material/card": "2.0.0-alpha.6",
+ "@angular2-material/checkbox": "2.0.0-alpha.6",
+ "@angular2-material/core": "2.0.0-alpha.6",
+ "@angular2-material/input": "2.0.0-alpha.6",
+ "@angular2-material/progress-circle": "2.0.0-alpha.6",
+ "@angular2-material/toolbar": "2.0.0-alpha.6",
"angular2-jwt": "^0.1.15",
"cors": "2.7.1",
"es6-promise": "3.1.2",
View
@@ -34,6 +34,7 @@
'@angular/common',
'@angular/compiler',
'@angular/core',
+ '@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',

0 comments on commit ebd79c1

Please sign in to comment.