feat(angular): update to angular 2.0.0-rc.3

package.json

@@ -72,21 +72,21 @@
     "release": "./node_modules/.bin/standard-version && npm run reddit-release"
   },
   "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",
+    "@angular/common": "2.0.0-rc.3",
+    "@angular/compiler": "2.0.0-rc.3",
+    "@angular/core": "2.0.0-rc.3",
+    "@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.7",
     "async": "1.5.2",
     "chalk": "1.1.3",
-    "core-js": "2.3.0",
+    "core-js": "2.4.0",
     "d3": "3.5.17",
     "dateformat": "1.0.12",
-    "es6-shim": "0.35.0",
+    "es6-shim": "0.35.1",
     "lru-cache": "4.0.1",
-    "reflect-metadata": "0.1.2",
+    "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "0.6.12"
   },

src/client/app.component.ts

@@ -1,19 +1,8 @@
 import {Component} from '@angular/core';
-import {HTTP_BINDINGS} from '@angular/http';
-import {Router, Routes} from '@angular/router';
-
-import {BuildComponent} from './build/build.component';
-import {ChampionsComponent} from './champions/champions.component';
-import {FeaturesComponent} from './features/features.component';
-import {RegionsComponent} from './region/region.component';
+import {Router} from '@angular/router';
 
 @Component({selector: 'app', template: '<router-outlet></router-outlet>'})
 
-@Routes([
-  {path: '/:region/:champion/summoner/:summoner', component: BuildComponent}, {path: '/:region/:champion/build', component: BuildComponent}, {path: '/:region/:champion', component: FeaturesComponent},
-  {path: '/:region', component: ChampionsComponent}, {path: '/', component: RegionsComponent}
-])
-
 export class AppComponent {
   constructor(private router: Router) {}
 }

src/client/app.routes.ts

@@ -0,0 +1,13 @@
+import {RouterConfig, provideRouter} from '@angular/router';
+
+import {BuildComponent} from './build/build.component';
+import {ChampionsComponent} from './champions/champions.component';
+import {FeaturesComponent} from './features/features.component';
+import {RegionsComponent} from './region/region.component';
+
+export const routes: RouterConfig = [
+  {path: ':region/:champion/summoner/:summoner', component: BuildComponent}, {path: ':region/:champion/build', component: BuildComponent}, {path: ':region/:champion', component: FeaturesComponent},
+  {path: ':region', component: ChampionsComponent}, {path: '', component: RegionsComponent}
+];
+
+export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

src/client/boot.ts

@@ -21,16 +21,19 @@
 import {PLATFORM_DIRECTIVES, enableProdMode, provide} from '@angular/core';
 import {HTTP_BINDINGS} from '@angular/http';
 import {bootstrap} from '@angular/platform-browser-dynamic';
-import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS} from '@angular/router';
+import {ROUTER_DIRECTIVES, provideRouter} from '@angular/router';
+
+import {BuildComponent} from './build/build.component';
+import {ChampionsComponent} from './champions/champions.component';
+import {FeaturesComponent} from './features/features.component';
+import {RegionsComponent} from './region/region.component';
 
 if (ENV === 'production') {
   enableProdMode();
 }
 
 import {AppComponent} from './app.component';
+import {APP_ROUTER_PROVIDERS} from './app.routes';
+
 
-bootstrap(AppComponent, [HTTP_BINDINGS, ROUTER_PROVIDERS, provide(PLATFORM_DIRECTIVES, {useValue: ROUTER_DIRECTIVES, multi: true})]).catch((err) => {
-  if (ENV !== 'production') {
-    console.error(err);
-  }
-});
+bootstrap(AppComponent, [HTTP_BINDINGS, APP_ROUTER_PROVIDERS, provide(PLATFORM_DIRECTIVES, {useValue: ROUTER_DIRECTIVES, multi: true})]).catch(err => console.error(err));

src/client/build/build.component.ts

@@ -1,5 +1,5 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-import {RouteSegment} from '@angular/router';
+import {Component, OnInit, ViewEncapsulation} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 import {settings} from '../../../config/settings';
 import {GraphComponent} from '../build/graph/graph.component';
@@ -30,7 +30,7 @@ import {LolApiService} from '../misc/lolapi.service';
     <error [error]="error" (retry)="getData()"></error>`
 })
 
-export class BuildComponent {
+export class BuildComponent implements OnInit {
   private championKey: string;
   private champion: any;
   private loading: boolean = true;
@@ -39,12 +39,16 @@ export class BuildComponent {
   private samples: Samples = {xp: [], gold: []};
   private pickedItems: Array<Object>;
 
-  constructor(routeSegment: RouteSegment, private lolApi: LolApiService) {
-    this.championKey = routeSegment.getParam('champion');
-    this.getData();
+  constructor(private route: ActivatedRoute, private lolApi: LolApiService) {}
 
-    let summoner: string = routeSegment.getParam('summoner');
-    this.getMatchData(summoner);
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.championKey = params['champion'];
+      this.getData();
+
+      let summoner = params['summoner'];
+      this.getMatchData(summoner);
+    });
   }
 
   getData() {

src/client/champions/champions.component.ts

@@ -1,6 +1,6 @@
 import {NgFor, NgIf} from '@angular/common';
 import {Component, ViewEncapsulation} from '@angular/core';
-import {RouteSegment, Router} from '@angular/router';
+import {Router} from '@angular/router';
 
 import {FiltersComponent} from '../champions/filters.component';
 import {NamePipe} from '../champions/pipes/name.pipe';

src/client/features/features.component.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation} from '@angular/core';
-import {RouteSegment, Router} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 import {LolApiService} from '../misc/lolapi.service';
 
@@ -28,7 +28,9 @@ export class FeaturesComponent {
   private champion: string;
   private error: boolean = false;
 
-  constructor(current: RouteSegment, private router: Router, private lolApi: LolApiService) { this.champion = current.getParam('champion'); }
+  constructor(route: ActivatedRoute, private router: Router, private lolApi: LolApiService) {
+    route.params.subscribe(params => { this.champion = params['champion']; });
+  }
 
   getSummonerId(event: HTMLInputElement) {
     this.lolApi.getSummonerId(event.value, this.champion)

src/client/misc/lolapi.service.ts

@@ -2,7 +2,7 @@ import 'rxjs/Rx';
 
 import {Injectable, bind} from '@angular/core';
 import {BaseResponseOptions, Headers, Http, Response} from '@angular/http';
-import {RouteSegment} from '@angular/router';
+import {ActivatedRoute} from '@angular/router';
 import {Observable} from 'rxjs/Observable';
 
 import {settings} from '../../../config/settings';
@@ -12,50 +12,48 @@ export class LolApiService {
   public staticServer = settings.staticServer;
   public matchServer = settings.matchServer;
 
-  private realm: Observable<Response>;
+  private cachedObservables: Array<Observable<any>> = new Array<Observable<any>>();
   private region: string;
 
-  constructor(private routeSegment: RouteSegment, private http: Http) {}
-
-
-  public getRealm(): Observable<Response> {
-    if (!this.realm) {
-      this.realm = this.http.get(this.linkStaticData() + '/realm').map(res => res.json()).cache();
-    }
-    return this.realm;
+  constructor(route: ActivatedRoute, private http: Http) {
+    route.params.subscribe(params => { this.region = params['region'].toLowerCase(); });
   }
 
-  public getRegions() { return this.http.get('http://status.leagueoflegends.com/shards').map(res => res.json()); }
+  public getRealm(): Observable<any> { return this.cached('realm', this.linkStaticData() + '/realm'); }
 
-  public getChampions() { return this.http.get(this.linkStaticData() + '/champion?champData=info,tags').map(res => res.json()); }
+  public getRegions(): Observable<any> { return this.cached('shards', 'http://status.leagueoflegends.com/shards'); }
 
-  public getChampion(championKey: string) {
-    return this.http.get(this.linkStaticData() + '/champion/' + championKey + '?champData=allytips,altimages,image,partype,passive,spells,stats,tags').map(res => res.json());
+  public getChampions(): Observable<any> { return this.cached('champions', this.linkStaticData() + '/champion?champData=info,tags'); }
+
+  public getChampion(championKey: string): Observable<any> {
+    return this.cached('champion', this.linkStaticData() + '/champion/' + championKey + '?champData=allytips,altimages,image,partype,passive,spells,stats,tags');
   }
 
-  public getItems() { return this.http.get(this.linkStaticData() + '/item?itemListData=all').map(res => res.json()); }
+  public getItems(): Observable<any> { return this.cached('items', this.linkStaticData() + '/item?itemListData=all'); }
 
-  public getMasteries() { return this.http.get(this.linkStaticData() + '/mastery?masteryListData=all').map(res => res.json()); }
+  public getMasteries(): Observable<any> { return this.cached('masteries', this.linkStaticData() + '/mastery?masteryListData=all'); }
 
-  public getSummonerId(summonerName: string, championKey: string) { return this.http.get(this.linkMatchData() + '/summoner/' + summonerName + '/' + championKey).map(res => res.json()); }
+  public getSummonerId(summonerName: string, championKey: string): Observable<any> { return this.get(this.linkMatchData() + '/summoner/' + summonerName + '/' + championKey); }
 
-  public getMatchData(summonerName: string, championKey: string, gameTime: number, samples: number) {
-    return this.http.get(this.linkMatchData() + '/match/' + summonerName + '/' + championKey + '?gameTime=' + gameTime + '&samples=' + samples).map(res => res.json());
+  public getMatchData(summonerName: string, championKey: string, gameTime: number, samples: number): Observable<any> {
+    return this.get(this.linkMatchData() + '/match/' + summonerName + '/' + championKey + '?gameTime=' + gameTime + '&samples=' + samples);
   }
 
+  private cached(name: string, url: string): Observable<any> {
+    if (!this.cachedObservables[name]) {
+      this.cachedObservables[name] = this.get(url).cache();
+    }
+    return this.cachedObservables[name];
+  }
 
-  private linkStaticData() { return this.linkStaticServer() + '/static-data/' + this.getRegion() + '/v1.2'; }
+  private get(url: string): Observable<any> { return this.http.get(url).map(res => res.json()); }
 
-  private linkMatchData() { return this.linkMatchServer() + '/' + this.getRegion(); }
+
+  private linkStaticData() { return this.linkStaticServer() + '/static-data/' + this.region + '/v1.2'; }
+
+  private linkMatchData() { return this.linkMatchServer() + '/' + this.region; }
 
   private linkStaticServer() { return 'http://' + this.staticServer.host + ':' + this.staticServer.port; }
 
   private linkMatchServer() { return 'http://' + this.matchServer.host + ':' + this.matchServer.port; }
-
-  private getRegion() {
-    if (!this.region) {
-      this.region = this.routeSegment.getParam('region').toLowerCase();
-    }
-    return this.region;
-  }
 }