initial push

.editorconfig

@@ -0,0 +1,17 @@
+# EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,10 @@
+# Specifies files to intentionally ignore when using Git
+# http:https://git-scm.com/docs/gitignore
+
+node_modules/
+www/build/
+platforms/
+plugins/
+*.swp
+.DS_Store
+Thumbs.db

README.md

@@ -1,2 +1,11 @@
-# ionic2-wp-api
-Ionic 2 WP-API Starter App
+# Ionic 2 WP-API Starter App
+
+Files for tutorial on [apppresser.com](apppresser.com/blog)
+
+To install, clone this repo and cd into the root directory.
+
+[Ionic CLI tools](http:https://ionicframework.com/docs/v2/cli/) are required.
+
+`npm install`
+
+`ionic serve`

app/app.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { Platform, ionicBootstrap } from 'ionic-angular';
+import { StatusBar } from 'ionic-native';
+import { TabsPage } from './pages/tabs/tabs';
+
+
+@Component({
+ template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class MyApp {
+
+ public rootPage: any;
+
+ constructor(private platform: Platform) {
+ this.rootPage = TabsPage;
+
+ platform.ready().then(() => {
+ // Okay, so the platform is ready and our plugins are available.
+ // Here you can do any higher level native things you might need.
+ StatusBar.styleDefault();
+ });
+ }
+}
+
+ionicBootstrap(MyApp);

app/pages/about/about.html

@@ -0,0 +1,10 @@
+<ion-header>
+ <ion-navbar>
+ <ion-title>
+ About
+ </ion-title>
+ </ion-navbar>
+</ion-header>
+
+<ion-content padding class="about">
+</ion-content>

app/pages/about/about.scss

@@ -0,0 +1,2 @@
+.about {
+}

app/pages/about/about.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+@Component({
+ templateUrl: 'build/pages/about/about.html'
+})
+export class AboutPage {
+ constructor(public navCtrl: NavController) {
+ }
+}

app/pages/contact/contact.html

@@ -0,0 +1,17 @@
+<ion-header>
+ <ion-navbar>
+ <ion-title>
+ Contact
+ </ion-title>
+ </ion-navbar>
+</ion-header>
+
+<ion-content>
+ <ion-list>
+ <ion-list-header>Follow us on Twitter</ion-list-header>
+ <ion-item>
+ <ion-icon name="ionic" item-left></ion-icon>
+ @ionicframework
+ </ion-item>
+ </ion-list>
+</ion-content>

app/pages/contact/contact.scss

@@ -0,0 +1,2 @@
+.contact {
+}

app/pages/contact/contact.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+@Component({
+ templateUrl: 'build/pages/contact/contact.html'
+})
+export class ContactPage {
+ constructor(public navCtrl: NavController) {
+ }
+}

app/pages/home/home.html

@@ -0,0 +1,22 @@
+<ion-header>
+ <ion-navbar>
+ <ion-title>Home</ion-title>
+ </ion-navbar>
+</ion-header>
+
+<ion-content class="home">
+ <ion-list>
+ <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
+ <ion-avatar item-left *ngIf="item.featured_image_urls && item.featured_image_urls.thumbnail">
+ <img [src]="item.featured_image_urls.thumbnail">
+ </ion-avatar>
+ <h2 [innerHTML]="item.title.rendered"></h2>
+ <p [innerHTML]="item.excerpt.rendered"></p>
+ </button>
+ </ion-list>
+
+ <ion-infinite-scroll (ionInfinite)="loadMore($event)">
+ <ion-infinite-scroll-content></ion-infinite-scroll-content>
+ </ion-infinite-scroll>
+
+</ion-content>

app/pages/home/home.scss

@@ -0,0 +1,2 @@
+.home {
+}

app/pages/home/home.ts

@@ -0,0 +1,73 @@
+import { Component } from '@angular/core';
+import {PostDetail} from '../post-detail/post-detail';
+import { NavController, NavParams } from 'ionic-angular';
+import {Http} from '@angular/http';
+import 'rxjs/add/operator/map';
+
+@Component({
+ templateUrl: 'build/pages/home/home.html'
+})
+export class HomePage {
+ url: string = 'https://apppresser.com/wp-json/wp/v2/posts';
+ items: any;
+ page: any;
+
+ constructor(public navCtrl: NavController, private http: Http, private nav: NavController ) {
+ }
+
+ ionViewDidEnter() {
+
+ this.page = '1';
+
+ this.loadPosts( this.page ).then( data => {
+ console.log('Posts loaded', data);
+ this.items = data;
+ });
+ }
+
+ loadPosts( page ) {
+
+ if( !page ) {
+ let page = '1';
+ }
+
+ return new Promise(resolve => {
+
+ this.http.get( this.url + '?page=' + page )
+ .map(res => res.json())
+ .subscribe(data => {
+ // we've got back the raw data, now generate the core schedule data
+ // and save the data for later reference
+ resolve( data );
+ });
+
+ });
+ }
+
+ itemTapped(event, item) {
+ this.nav.push(PostDetail, {
+ item: item
+ });
+ }
+
+ loadMore(infiniteScroll) {
+
+ this.page++;
+
+ this.loadPosts( this.page ).then( items => {
+ // Loads posts from WordPress API
+ let length = items["length"];
+
+ if( length === 0 ) {
+ infiniteScroll.complete();
+ return;
+ }
+
+ for (var i = length - 1; i >= 0; i--) {
+ this.items.push( items[i] );
+ }
+
+ infiniteScroll.complete();
+ });
+ }
+}

app/pages/post-detail/post-detail.html

@@ -0,0 +1,25 @@
+<ion-header>
+
+ <ion-navbar>
+ <ion-title>{{selectedItem.title.rendered}}</ion-title>
+ </ion-navbar>
+
+</ion-header>
+
+<ion-content padding>
+ <div *ngIf="selectedItem" class="selection">
+ <ion-card>
+
+ <img *ngIf="selectedItem.featured_image_urls && selectedItem.featured_image_urls.medium" [src]="selectedItem.featured_image_urls.medium" class="featured-image" />
+
+ <ion-card-content>
+ <ion-card-title>
+ <b>{{selectedItem.title.rendered}} ${{selectedItem._price}}</b>
+ </ion-card-title>
+ <p [innerHTML]="selectedItem.content.rendered"></p>
+ </ion-card-content>
+
+ </ion-card>
+ </div>
+
+</ion-content>

app/pages/post-detail/post-detail.scss

@@ -0,0 +1,9 @@
+.post-detail {
+ .featured-image {
+ max-height: 300px;
+ height: auto;
+ width: auto;
+ display: block;
+ margin: 0 auto;
+ }
+}

app/pages/post-detail/post-detail.ts

@@ -0,0 +1,15 @@
+import {NavController, NavParams} from 'ionic-angular';
+import {Component} from '@angular/core';
+
+@Component({
+ templateUrl: 'build/pages/post-detail/post-detail.html'
+})
+export class PostDetail {
+ selectedItem: any;
+
+ constructor(private nav: NavController, navParams: NavParams) {
+ // If we navigated to this page, we will have an item available as a nav param
+ this.selectedItem = navParams.get('item');
+ }
+
+}

app/pages/tabs/tabs.html

@@ -0,0 +1,5 @@
+<ion-tabs>
+ <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
+ <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
+ <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
+</ion-tabs>

app/pages/tabs/tabs.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { HomePage } from '../home/home';
+import { AboutPage } from '../about/about';
+import { ContactPage } from '../contact/contact';
+
+@Component({
+ templateUrl: 'build/pages/tabs/tabs.html'
+})
+export class TabsPage {
+
+ public tab1Root: any;
+ public tab2Root: any;
+ public tab3Root: any;
+
+ constructor() {
+ // this tells the tabs component which Pages
+ // should be each tab's root Page
+ this.tab1Root = HomePage;
+ this.tab2Root = AboutPage;
+ this.tab3Root = ContactPage;
+ }
+}

app/theme/app.core.scss

@@ -0,0 +1,16 @@
+// http:https://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Imports
+// --------------------------------------------------
+// These are the imports which make up the design of this app.
+// By default each design mode includes these shared imports.
+// App Shared Sass variables belong in app.variables.scss.
+
+@import "../pages/about/about";
+
+@import "../pages/contact/contact";
+
+@import "../pages/home/home";
+
+@import "../pages/post-detail/post-detail";

app/theme/app.ios.scss

@@ -0,0 +1,31 @@
+// http:https://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import "app.variables";
+
+
+// App iOS Variables
+// --------------------------------------------------
+// iOS only Sass variables can go here
+
+
+// Ionic iOS Sass
+// --------------------------------------------------
+// Custom App variables must be declared before importing Ionic.
+// Ionic will use its default values when a custom variable isn't provided.
+@import "ionic.ios";
+
+
+// App Shared Sass
+// --------------------------------------------------
+// All Sass files that make up this app goes into the app.core.scss file.
+// For simpler CSS overrides, custom app CSS must come after Ionic's CSS.
+@import "app.core";
+
+
+// App iOS Only Sass
+// --------------------------------------------------
+// CSS that should only apply to the iOS app

app/theme/app.md.scss

@@ -0,0 +1,31 @@
+// http:https://ionicframework.com/docs/v2/theming/
+
+
+// App Shared Variables
+// --------------------------------------------------
+// Shared Sass variables go in the app.variables.scss file
+@import "app.variables";
+
+
+// App Material Design Variables
+// --------------------------------------------------
+// Material Design only Sass variables can go here
+
+
+// Ionic Material Design Sass
+// --------------------------------------------------
+// Custom App variables must be declared before importing Ionic.
+// Ionic will use its default values when a custom variable isn't provided.
+@import "ionic.md";
+
+
+// App Shared Sass
+// --------------------------------------------------
+// All Sass files that make up this app goes into the app.core.scss file.
+// For simpler CSS overrides, custom app CSS must come after Ionic's CSS.
+@import "app.core";
+
+
+// App Material Design Only Sass
+// --------------------------------------------------
+// CSS that should only apply to the Material Design app