Skip to content

Commit ebd79c1

Browse files
ajtowfajtowf
committed
Upgraded to angular rc3, material2 alpha.6 and new 3.0 router during screencast.
1 parent 1038741 commit ebd79c1

File tree

9 files changed

+73
-41
lines changed

9 files changed

+73
-41
lines changed

‎app/app.ts‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import {Component, bind, NgZone} from '@angular/core';
2-
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, Routes, Router} from '@angular/router';
2+
import {ROUTER_DIRECTIVES} from '@angular/router';
33
import {Location} from '@angular/common';
44
import {tokenNotExpired, JwtHelper} from 'angular2-jwt';
55
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
66

7-
import { Todo } from './components/todo/todo';
8-
import { About } from './components/about/about';
9-
import { Profile } from './components/profile/profile';
10-
117
import {MdToolbar} from '@angular2-material/toolbar';
128

139
declare var Auth0Lock;
@@ -18,11 +14,6 @@ declare var Auth0Lock;
1814
styleUrls: ['./app/app.css'],
1915
directives: [ROUTER_DIRECTIVES, MdToolbar]
2016
})
21-
@Routes([
22-
{ path: '/', component: Todo },
23-
{ path: '/about/:id', component: About },
24-
{ path: '/profile', component: Profile}
25-
])
2617
export class AppComponent {
2718
lock = new Auth0Lock('T1wdQrDposGW5BisaKViC0Cu9CuxtR0c', 'towfeek.eu.auth0.com');
2819
jwtHelper: JwtHelper = new JwtHelper();

‎app/auth-guard.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {tokenNotExpired} from 'angular2-jwt';
2+
import { Injectable } from '@angular/core';
3+
import {
4+
CanActivate,
5+
ActivatedRouteSnapshot,
6+
RouterStateSnapshot,
7+
Router
8+
} from '@angular/router';
9+
10+
@Injectable()
11+
export class AuthGuard implements CanActivate {
12+
13+
constructor(private router: Router) {}
14+
15+
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
16+
if (tokenNotExpired()) {
17+
return true;
18+
}
19+
20+
this.router.navigate(['']);
21+
return false;
22+
}
23+
}

‎app/boot.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22

33
import {bootstrap} from '@angular/platform-browser-dynamic';
44
import {bind, provide} from '@angular/core';
5-
import {ROUTER_PROVIDERS } from '@angular/router';
65
import { LocationStrategy, HashLocationStrategy} from '@angular/common';
76
import {AppComponent} from './app';
87

8+
import {APP_ROUTER_PROVIDER} from './routes';
99
import {HTTP_PROVIDERS, Http} from '@angular/http';
1010
import {AuthHttp, AuthConfig} from 'angular2-jwt';
11+
import {AuthGuard} from './auth-guard';
1112

1213
bootstrap(AppComponent, [
1314
HTTP_PROVIDERS,
14-
ROUTER_PROVIDERS,
15+
APP_ROUTER_PROVIDER,
1516
bind(LocationStrategy).toClass(HashLocationStrategy),
1617
provide(AuthConfig, { useFactory: () => {
1718
return new AuthConfig();
1819
}}),
19-
AuthHttp
20+
AuthHttp,
21+
AuthGuard
2022
]);

‎app/components/about/about.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
import {Component} from '@angular/core';
2-
import { Router, RouteSegment, RouteTree, OnActivate } from '@angular/router';
1+
import {Component, OnInit} from '@angular/core';
2+
import { ActivatedRoute } from '@angular/router';
33

44
@Component({
55
selector: 'about',
66
template: `
77
Welcome to the about page! This is the ID: {{id}}
88
`
99
})
10-
export class About implements OnActivate {
10+
export class About implements OnInit {
1111
id: string;
1212

13-
constructor(private router: Router) {
13+
constructor(private route: ActivatedRoute) {
1414
}
1515

16-
routerOnActivate(
17-
current: RouteSegment,
18-
prev?: RouteSegment,
19-
currTree?: RouteTree,
20-
prevTree?: RouteTree) {
21-
this.id = current.getParam('id');
16+
ngOnInit() {
17+
this.id = this.route.snapshot.params['id'];
18+
this.route.params
19+
.map(params => params['id'])
20+
.subscribe(id => {
21+
this.id = id;
22+
});
2223
}
2324
}

‎app/components/profile/profile.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Component, OnInit, OnDestroy, AfterContentInit} from '@angular/core';
2-
// import {CanActivate} from '@angular/router';
32
import {tokenNotExpired} from 'angular2-jwt';
43
import {AuthHttp} from 'angular2-jwt';
54

@@ -11,7 +10,6 @@ import {AuthHttp} from 'angular2-jwt';
1110
{{quote}}
1211
`
1312
})
14-
// @CanActivate(() => tokenNotExpired())
1513
export class Profile implements OnInit, OnDestroy, AfterContentInit {
1614
profile: any;
1715
quote: any;

‎app/components/todo/todo.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@
99
</button>
1010
</div>
1111

12-
<form [ngFormModel]="myForm" (submit)="onSubmit()">
12+
<!--<form [ngFormModel]="myForm" (submit)="onSubmit()">
1313
<div>
1414
<md-input required placeholder="What do you need to do?" [ngFormControl]="newTodo"></md-input>
1515
</div>
1616
1717
<button md-raised-button color="primary" type="submit" [disabled]="!myForm.valid">Add Todo</button>
18-
</form>
18+
</form>-->
1919

2020
<md-checkbox (change)="toggleAll($event)">
2121
Mark all as complete

‎app/routes.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { provideRouter, RouterConfig } from '@angular/router';
2+
3+
import { Todo } from './components/todo/todo';
4+
import { About } from './components/about/about';
5+
import { Profile } from './components/profile/profile';
6+
7+
import { AuthGuard} from './auth-guard';
8+
9+
export const appRoutes: RouterConfig = [
10+
{ path: '', component: Todo },
11+
{ path: 'about/:id', component: About },
12+
{ path: 'profile', component: Profile, canActivate:[AuthGuard]}
13+
];
14+
15+
export const APP_ROUTER_PROVIDER = provideRouter(appRoutes);

‎package.json‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,21 @@
2626
"typings": "^0.8.1"
2727
},
2828
"dependencies": {
29-
"@angular/common": "2.0.0-rc.1",
30-
"@angular/compiler": "2.0.0-rc.1",
31-
"@angular/core": "2.0.0-rc.1",
32-
"@angular/http": "2.0.0-rc.1",
33-
"@angular/platform-browser": "2.0.0-rc.1",
34-
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
35-
"@angular/router": "2.0.0-rc.1",
36-
"@angular2-material/button": "2.0.0-alpha.4",
37-
"@angular2-material/card": "2.0.0-alpha.4",
38-
"@angular2-material/checkbox": "2.0.0-alpha.4",
39-
"@angular2-material/core": "2.0.0-alpha.4",
40-
"@angular2-material/input": "2.0.0-alpha.4",
41-
"@angular2-material/progress-circle": "2.0.0-alpha.4",
42-
"@angular2-material/toolbar": "2.0.0-alpha.4",
29+
"@angular/common": "2.0.0-rc.3",
30+
"@angular/compiler": "2.0.0-rc.3",
31+
"@angular/core": "2.0.0-rc.3",
32+
"@angular/forms": "^0.1.0",
33+
"@angular/http": "2.0.0-rc.3",
34+
"@angular/platform-browser": "2.0.0-rc.3",
35+
"@angular/platform-browser-dynamic": "2.0.0-rc.3",
36+
"@angular/router": "3.0.0-alpha.8",
37+
"@angular2-material/button": "2.0.0-alpha.6",
38+
"@angular2-material/card": "2.0.0-alpha.6",
39+
"@angular2-material/checkbox": "2.0.0-alpha.6",
40+
"@angular2-material/core": "2.0.0-alpha.6",
41+
"@angular2-material/input": "2.0.0-alpha.6",
42+
"@angular2-material/progress-circle": "2.0.0-alpha.6",
43+
"@angular2-material/toolbar": "2.0.0-alpha.6",
4344
"angular2-jwt": "^0.1.15",
4445
"cors": "2.7.1",
4546
"es6-promise": "3.1.2",

‎systemjs.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
'@angular/common',
3535
'@angular/compiler',
3636
'@angular/core',
37+
'@angular/forms',
3738
'@angular/http',
3839
'@angular/platform-browser',
3940
'@angular/platform-browser-dynamic',

0 commit comments

Comments
 (0)