Angular 2 Pokédex
+ ++ +
+
+
+
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.css b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.css
new file mode 100644
index 0000000000..bf5c4b8cb6
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.css
@@ -0,0 +1,51 @@
+.pokedex {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.pokedex-pokemon {
+ background-color: rgb(255, 255, 255);
+ display: flex;
+ flex-direction: column;
+ margin: 10px;
+ padding: 10px;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+ border-radius: 2px;
+}
+
+.pokedex-pokemon-id {
+ text-align: center;
+ font-size: 24px;
+}
+
+.pokedex-pokemon-sprite {
+ width: 96px;
+ height: 96px;
+ transition: opacity 0.2s linear;
+ opacity: 1;
+}
+
+.pokedex-pokemon-sprite.hidden {
+ opacity: 0;
+}
+
+.pokedex-pokemon-name {
+ text-align: center;
+}
+
+.load-button {
+ display: block;
+ margin: 20px auto;
+ border: 0;
+ border-radius: 2px;
+ background-color: rgb(0, 0, 128);
+ color: rgb(255, 255, 255);
+ max-width: 200px;
+ padding: 10px 50px;
+ font-size: 20px;
+}
+
+.load-button[disabled] {
+ opacity: 0.6;
+}
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.html b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.html
new file mode 100644
index 0000000000..fac7e9c175
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.html
@@ -0,0 +1,25 @@
+
+ ![]()
+
+
+ #{{ p.id}}
+
+
+ {{ p.name | capitalize }}
+
+ Angular 2 Pokédex
+ ++ +
+
+
+
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.scss b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.scss
new file mode 100644
index 0000000000..bf5c4b8cb6
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.scss
@@ -0,0 +1,51 @@
+.pokedex {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.pokedex-pokemon {
+ background-color: rgb(255, 255, 255);
+ display: flex;
+ flex-direction: column;
+ margin: 10px;
+ padding: 10px;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+ border-radius: 2px;
+}
+
+.pokedex-pokemon-id {
+ text-align: center;
+ font-size: 24px;
+}
+
+.pokedex-pokemon-sprite {
+ width: 96px;
+ height: 96px;
+ transition: opacity 0.2s linear;
+ opacity: 1;
+}
+
+.pokedex-pokemon-sprite.hidden {
+ opacity: 0;
+}
+
+.pokedex-pokemon-name {
+ text-align: center;
+}
+
+.load-button {
+ display: block;
+ margin: 20px auto;
+ border: 0;
+ border-radius: 2px;
+ background-color: rgb(0, 0, 128);
+ color: rgb(255, 255, 255);
+ max-width: 200px;
+ padding: 10px 50px;
+ font-size: 20px;
+}
+
+.load-button[disabled] {
+ opacity: 0.6;
+}
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.ts
new file mode 100644
index 0000000000..ae6e8182ec
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.component.ts
@@ -0,0 +1,95 @@
+import { Component } from "@angular/core";
+ import { PokedexService } from "./pokedex.service";
+import { Pokemon } from "./pokemon";
+import { Inject } from "@angular/core";
+
+
+@Component({
+ selector: "app-root",
+ template: require("./app.component.html"),
+ styles: [ `
+ .pokedex {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+
+.pokedex-pokemon {
+ background-color: rgb(255, 255, 255);
+ display: flex;
+ flex-direction: column;
+ margin: 10px;
+ padding: 10px;
+ box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+ border-radius: 2px;
+}
+
+.pokedex-pokemon-id {
+ text-align: center;
+ font-size: 24px;
+}
+
+.pokedex-pokemon-sprite {
+ width: 96px;
+ height: 96px;
+ transition: opacity 0.2s linear;
+ opacity: 1;
+}
+
+.pokedex-pokemon-sprite.hidden {
+ opacity: 0;
+}
+
+.pokedex-pokemon-name {
+ text-align: center;
+}
+
+.load-button {
+ display: block;
+ margin: 20px auto;
+ border: 0;
+ border-radius: 2px;
+ background-color: rgb(0, 0, 128);
+ color: rgb(255, 255, 255);
+ max-width: 200px;
+ padding: 10px 50px;
+ font-size: 20px;
+}
+
+.load-button[disabled] {
+ opacity: 0.6;
+}
+ `]
+})
+export class AppComponent {
+ pokemon: Pokemon[] = [];
+ isLoading: boolean = false;
+ error: boolean = false;
+
+
+ constructor( @Inject(PokedexService) private pokedexService: PokedexService) {
+
+ }
+
+ ngOnInit() {
+ this.loadMore();
+ }
+
+ loadMore() {
+ this.isLoading = true;
+ this.pokedexService.getPokemon(this.pokemon.length, 9)
+ .then(pokemon => {
+ pokemon = pokemon.map(p => {
+ p.imageLoaded = false;
+ return p;
+ });
+ this.pokemon = this.pokemon.concat(pokemon);
+ this.isLoading = false;
+ this.error = false;
+ })
+ .catch(() => {
+ this.error = true;
+ this.isLoading = false;
+ });
+ }
+}
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.module.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.module.ts
new file mode 100644
index 0000000000..efcefd2bd3
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/app.module.ts
@@ -0,0 +1,28 @@
+import { BrowserModule } from "@angular/platform-browser";
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { FormsModule } from "@angular/forms";
+import { AppComponent } from "./app.component";
+import { HttpModule } from "@angular/http";
+
+import { PokedexService } from "./pokedex.service";
+import { CapitalizePipe } from "./capitalize.pipe";
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ CapitalizePipe
+ ],
+ imports: [
+ BrowserModule,
+ CommonModule,
+ FormsModule,
+ HttpModule
+ ],
+ providers: [PokedexService],
+ entryComponents: [AppComponent],
+ bootstrap: [AppComponent]
+})
+export class AppModule {
+
+}
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/capitalize.pipe.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/capitalize.pipe.ts
new file mode 100644
index 0000000000..47a20cfd8a
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/capitalize.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+ name: "capitalize"
+})
+export class CapitalizePipe implements PipeTransform {
+ transform(value: string): string {
+ return value.charAt(0).toUpperCase() + value.substr(1);
+ }
+}
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.dev.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.dev.ts
new file mode 100644
index 0000000000..9923be3653
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.dev.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: false
+};
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.prod.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.prod.ts
new file mode 100644
index 0000000000..babe05e3ee
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.ts
new file mode 100644
index 0000000000..9923be3653
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/environments/environment.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: false
+};
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/index.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/index.ts
new file mode 100644
index 0000000000..a36dd69972
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/index.ts
@@ -0,0 +1,3 @@
+export * from "./environments/environment";
+export * from "./app.component";
+export * from "./app.module";
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/ipokedexservice.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/ipokedexservice.ts
new file mode 100644
index 0000000000..e0593e6210
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/ipokedexservice.ts
@@ -0,0 +1,3 @@
+export interface IPokedexService{
+ getPokemon(offset: number, limit: number) ;
+}
\ No newline at end of file
diff --git a/samples/angular2-pokemon/src/webparts/pokemonGo/app/pokedex.service.sp.ts b/samples/angular2-pokemon/src/webparts/pokemonGo/app/pokedex.service.sp.ts
new file mode 100644
index 0000000000..6c4e5ab97f
--- /dev/null
+++ b/samples/angular2-pokemon/src/webparts/pokemonGo/app/pokedex.service.sp.ts
@@ -0,0 +1,33 @@
+// import { Injectable, Inject } from "@angular/core";
+// import { Http } from "@angular/http";
+// import "rxjs/add/operator/toPromise";
+// import {IPokedexService} from "./ipokedexservice";
+// import {
+
+
+// IWebPartContext
+
+// } from '@microsoft/sp-client-preview';
+
+// @Injectable()
+// export class PokedexServiceSP implements IPokedexService {
+// private baseSpriteUrl: string = "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/";
+
+// constructor(@Inject(Http) private http: Http, private context: IWebPartContext) {
+
+// }
+
+// getPokemon(offset: number, limit: number): Promise
+ ![]()
+
+
+ #{{ p.id}}
+
+
+ {{ p.name | capitalize }}
+
+