working v1

src/app/app.module.ts

@@ -3,17 +3,22 @@ import { ErrorHandler, NgModule } from '@angular/core';
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';
+import { HttpClientModule } from '@angular/common/http';
 
 import { MyApp } from './app.component';
 import { HomePage } from '../pages/home/home';
+import {FlashCardComponent } from '../components/flash-card/flash-card';
+import { FlashCardsProvider } from '../providers/flash-cards/flash-cards';
 
 @NgModule({
   declarations: [
     MyApp,
-    HomePage
+    HomePage,
+    FlashCardComponent
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     IonicModule.forRoot(MyApp)
   ],
   bootstrap: [IonicApp],
@@ -24,7 +29,8 @@ import { HomePage } from '../pages/home/home';
   providers: [
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    {provide: ErrorHandler, useClass: IonicErrorHandler},
+    FlashCardsProvider
   ]
 })
 export class AppModule {}

src/assets/data/javacards.txt

@@ -0,0 +1,66 @@
+[
+        {
+            "front": "abstract",
+            "back": "A Java keyword used in a class definition to specify that a class is not to be instantiated, but rather inherited by other classes. An abstract class can have abstract methods that are not implemented in the abstract class, but in subclasses."
+        },
+        {
+            "front": "abstract class",
+            "back": "A class that contains one or more abstract methods , and therefore can never be instantiated. Abstract classes are defined so that other classes can extend them and make them concrete by implementing the abstract methods."
+        },
+        {
+            "front": "abstract method",
+            "back": "A method that has no implementation."
+        },
+        {
+            "front": "Abstract Window Toolkit (AWT)",
+            "back": "A collection of graphical user interface (GUI) components that were implemented using native-platform versions of the components. These components provide that subset of functionality which is common to all native platforms. Largely supplanted by the Project Swing component set. See also Swing ."
+        },
+        {
+            "front": "access control´",
+            "back": "The methods by which interactions with resources are limited to collections of users or programs for the purpose of enforcing integrity, confidentiality, or availability constraints."
+        },
+        {
+            "front": "ACID",
+            "back": "The acronym for the four properties guaranteed by transactions: atomicity, consistency, isolation, and durability."
+        },
+        {
+            "front": "actual parameter list",
+            "back": "The arguments specified in a particular method call. See also formal parameter list ."
+        },
+        {
+            "front": "API",
+            "back": "Application Programming Interface. The specification of how a programmer writing an application accesses the behavior and state of classes and objects."
+        },
+        {
+            "front": "applet",
+            "back": "A component that typically executes in a Web browser, but can execute in a variety of other applications or devices that support the applet programming model."
+        },
+        {
+            "front": "argument",
+            "back": "A data item specified in a method call. An argument can be a literal value, a variable, or an expression."
+        },
+        {
+            "front": "array",
+            "back": "A collection of data items, all of the same type, in which each item's position is uniquely designated by an integer."
+        },
+        {
+            "front": "ASCII",
+            "back": "American Standard Code for Information Interchange. A standard assignment of 7-bit numeric codes to characters. See also Unicode ."
+        },
+        {
+            "front": "atomic",
+            "back": "Refers to an operation that is never interrupted or left in an incomplete state under any circumstance."
+        },
+        {
+            "front": "authentication",
+            "back": "The process by which an entity proves to another entity that it is acting on behalf of a specific identity."
+        },
+        {
+            "front": "authorization",
+            "back": "See access control."
+        },
+        {
+            "front": "autoboxing",
+            "back": "Automatic conversion between reference and primitive types."
+        }
+    ]

src/components/components.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { FlashCardComponent } from './flash-card/flash-card';
+@NgModule({
+	declarations: [FlashCardComponent],
+	imports: [],
+	exports: [FlashCardComponent]
+})
+export class ComponentsModule {}

src/components/flash-card/flash-card.html

@@ -0,0 +1,15 @@
+<div class="flip-container" (click)="flip()" [class.flipped]="flipped">
+ 
+  <div class="flipper">
+
+      <div class="front">
+          <ng-content select=".flash-card-front"></ng-content>
+      </div>
+
+      <div class="back">
+          <ng-content select=".flash-card-back"></ng-content>
+      </div>
+
+  </div>
+
+</div>

src/components/flash-card/flash-card.scss

@@ -0,0 +1,64 @@
+.ios, .md {
+ 
+    flash-card {
+ 
+        /*
+         *  Flip animation by David Walsh: https://davidwalsh.name/css-flip
+         */
+ 
+        /* entire container, keeps perspective */
+        .flip-container {
+            perspective: 1000px;
+        }
+ 
+            /* flip the pane when hovered */
+            .flip-container.flipped .flipper {
+                transform: rotateY(180deg);
+            }
+ 
+        .flip-container, .front, .back {
+            width: 90vw;
+            height: 40vh;
+            margin: 20px auto;
+        }
+ 
+        /* flip speed goes here */
+        .flipper {
+            transition: 0.6s;
+            transform-style: preserve-3d;
+ 
+            position: relative;
+        }
+ 
+        /* hide back of pane during swap */
+        .front, .back {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background-color: #ecf0f1;
+            backface-visibility: hidden;
+            -webkit-box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
+            -moz-box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
+            box-shadow: 0px 8px 4px -4px rgba(163,163,163,0.25);
+            border: 1px solid #dee2e3;
+            margin: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+ 
+        /* front pane, placed above back */
+        .front {
+            z-index: 2;
+            /* for firefox 31 */
+            transform: rotateY(0deg);
+        }
+ 
+        /* back, initially hidden pane */
+        .back {
+            transform: rotateY(180deg);
+        }
+ 
+    }
+ 
+}

src/components/flash-card/flash-card.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+/**
+ * Generated class for the FlashCardComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'flash-card',
+  templateUrl: 'flash-card.html'
+})
+export class FlashCardComponent {
+
+  flipped: boolean = false;
+ 
+  constructor() {
+ 
+  }
+ 
+  flip(){
+    this.flipped = !this.flipped;
+  }
+}

src/pages/home/home.html

@@ -1,14 +1,23 @@
 <ion-header>
-  <ion-navbar>
+  <ion-navbar color="primary">
     <ion-title>
-      Ionic Blank
+      ZipFlash Java Cards
     </ion-title>
   </ion-navbar>
 </ion-header>
 
-<ion-content padding>
-  The world is your oyster.
-  <p>
-    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
-  </p>
-</ion-content>
+<ion-content>
+    <button ion-button (click)='reset();'>Reset</button>
+    <button ion-button (click)='next();'>Next >></button>
+  <ion-slides #slider (ionSlideDidChange)="slideChanged()" (ionSlideNextEnd)="nextSlide()" (ionSlidePrevEnd)="prevSlide()"
+    [initialSlide]="0">
+		<ion-slide *ngFor="let current of cardSupply">
+      <flash-card>
+        <div class="flash-card-front">{{current.front}}</div>
+        <div class="flash-card-back">{{current.back}}</div>
+      </flash-card>
+    </ion-slide>
+
+  </ion-slides>
+
+</ion-content>

src/pages/home/home.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
-import { NavController } from 'ionic-angular';
+import { Component, ViewChild } from '@angular/core';
+import { NavController, Slides } from 'ionic-angular';
+import { FlashCardsProvider } from '../../providers/flash-cards/flash-cards';
 
 @Component({
   selector: 'page-home',
@@ -7,8 +8,41 @@ import { NavController } from 'ionic-angular';
 })
 export class HomePage {
 
-  constructor(public navCtrl: NavController) {
+  @ViewChild(Slides) slides: Slides;
 
+  currentCard = {
+    front: "Hello0",
+    back: "World!"
+  };
+  cardSupply: any;
+  prov: any;
+  currentIndex = 0;
+
+  constructor(public navCtrl: NavController, supply: FlashCardsProvider) {
+    this.prov = supply;
+    this.cardSupply = supply.allCards();
+  }
+
+  oninit() {
+    //this.cardSupply = this.prov.allCards();
+  }
+  slideChanged() {
+    // ready for more functionality
+  }
+
+  nextSlide() {
+     // ready for more functionality
+  }
+
+  prevSlide() {
+     // ready for more functionality
   }
 
+  reset() {
+    this.slides.slideTo(0, 500);
+  }
+  next() {
+    let idx = this.slides.getActiveIndex() + 1;
+    this.slides.slideTo(idx, 500);
+  }
 }

src/providers/flash-cards/flash-cards.ts

@@ -0,0 +1,86 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import 'rxjs/Rx';
+import 'rxjs/add/operator/map';
+
+
+/*
+  Generated class for the FlashCardsProvider provider.
+
+  See https://angular.io/guide/dependency-injection for more info on providers
+  and Angular DI.
+*/
+@Injectable()
+export class FlashCardsProvider {
+  defaultCard = {
+    front: "Hello",
+    back: "World!"
+  };
+  idx = 0;
+  defaultCards: any[] = [];
+  httpCl: HttpClient;
+  public _robotOverlords: any[] = [];
+  constructor(public http: HttpClient) {
+    console.log('Hello FlashCardsProvider Provider');
+    this.httpCl = http;
+    this.getData();
+  }
+  getData() {
+    return this.httpCl.get('assets/data/javacards.txt').subscribe(data => {
+      // var stringifiedData = JSON.stringify(data);
+      // //var parsedData: any[] = JSON.parse(stringifiedData);
+      // this.defaultCards = JSON.parse(stringifiedData);
+      for (var key in data) {
+        this.defaultCards.push(data[key]);
+      }
+      });
+  }
+
+
+  // load() {
+  //   console.log('load json called');
+  //   return new Promise(resolve => {
+  //     this.http.get('assets/data/javacards.json').map(response => {
+  //       this.data = response.json();
+  //       resolve(this.data);
+  //     });
+  //   });
+  // }
+  cardFor(cardindex) {
+    this.idx = cardindex % this.defaultCards.length;
+    return this.defaultCards[this.idx];
+  }
+  allCards() {
+    return this.defaultCards
+  }
+
+  testCards =
+    [
+      {
+        front: "Hello1",
+        back: "World!"
+      },
+      {
+        front: "Hello1",
+        back: "World!"
+      },
+      {
+        front: "Card2",
+        back: "Asshole!"
+      },
+      {
+        front: "Card3",
+        back: "Asshole!"
+      },
+      {
+        front: "Card4",
+        back: "Asshole!"
+      },
+      {
+        front: "Card5",
+        back: "Sweet!"
+      }
+
+    ];
+
+}