Создание приложения на Ionic с использованием API

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { Postlist } from '../pages/postlist/postlist';
import { Categorylist } from '../pages/categorylist/categorylist';
import { Authorlist } from '../pages/authorlist/authorlist';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    Postlist,
    Categorylist,
    Authorlist,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    Postlist,
    Categorylist,
    Authorlist,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) navCtrl: Nav;
  rootPage:any = TabsPage;
  
  pages: Array<{title: string, component: any, index: string, icon_name: string}>;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    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();
      splashScreen.hide();
    });

    this.pages = [
      { title: 'Публикации', component: TabsPage, index: '0', icon_name: 'ios-paper-outline' },
      { title: 'Категории', component: TabsPage, index: '1', icon_name: 'ios-albums-outline' },
      { title: 'Авторы', component: TabsPage, index: '2', icon_name: 'ios-contacts-outline' }
    ];
	
  }

  openPage(page) {
    this.navCtrl.setRoot(page.component, {index: page.index});
  }
  
}

header('Content-Type: application/json;charset=utf-8');
header('Access-Control-Allow-Origin: *');

$dblocation = "localhost";
$dbname = "database";
$dbuser = "username";
$dbpasswd = "password";

$mysqli = new mysqli($dblocation, $dbuser, $dbpasswd, $dbname);

$query = "
	select `tb_categories`.*
	from `tb_categories`
	order by `tb_categories`.`category`";
	
$data = array();

if ($res = $mysqli->query($query))
{
	$data['count'] = strval($res->num_rows);

	while($row = $res->fetch_assoc()){
	 
		$data['data'][] = array(
			'id' => $row['id'],
			'category' => $row['category'],
			'url' => $row['url']
		);

	}
	
}
	
echo json_encode($data);

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import { LoadingController } from 'ionic-angular';

@Component({
  selector: 'page-postlist',
  templateUrl: 'postlist.html',
})
export class Postlist {

  postlists: any;            // данные со списком публикаций, полученные из запроса
  postlists_new: any;        // данные СЛЕДУЮЩЕГО списка публикаций, которые получаются при пролистывании списка к последнему элементу
  countElement: number = 10; // кол-во элементов, которые мы получаем из запроса
  beginElement: number = 0;  // начальный номер публикации, с которого получаем список элементов
  post_error: string;        // результат выполнения запроса 0-успешно, 1-ошибка
  
  constructor(public navCtrl: NavController, public http: Http, public loadingCtrl: LoadingController, public navParams: NavParams) {
	// Метод получения данных из запроса
	// 0 - получаем данные с самого начала
	// 1 - получаем СЛЕДУЮЩИЕ данные по порядку 
	this.loadData(0);
  }

  loadData(isNew) {
    if (isNew==0){
	  // Первоначальные значения переменных
	  this.beginElement = 0;
	  this.countElement = 10;
  
      // Создаем окно загрузки
      let loadingPopup = this.loadingCtrl.create({
        content: ''
      });

      // Показываем окно загрузки
      loadingPopup.present();	
	
      // Получение данных, с указание URL-запроса и параметров
      this.http.get('https://mysite.ru/postlist.php?begin='+this.beginElement+'&limit='+this.countElement)
	    .timeout(20000)   // Ставим лимит на получение запроса и прерываем запрос через 20 сек.
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.postlists = data.data;     // Данные получены, записываем их
              this.countElement = data.count; // Записываем кол-во полученных публикаций
  			  this.post_error = "0";          // Результат - успешно
              loadingPopup.dismiss();         // Убираем окно загрузки
            }, 1000);

          },
          err => {
			loadingPopup.dismiss();           // Убираем окно загрузки
			this.post_error = "1";            // Результат - ошибка
		  }
      );	
	
	}else{
	  // Увеличиваем начальную позицию номера публикации для последующего получения именно с нужной позиции
	  this.beginElement = Number(this.beginElement) + Number(this.countElement);
	}
  }
  
  // Выполняется при пролистывании к последнему элементу списка
  doInfinite(infiniteScroll) {

	// Проверяем нужно ли выполнять запрос
	// Если в предыдущем запросе мы получили 0 публикаций,
	//   значит больше не нужно выполнять запрос для получения СЛЕДУЮЩЕГО набора данных
	if (this.countElement != 0){
      this.loadData(1);

      // Get the data
      this.http.get('https://mysite.ru/postlist.php?begin='+this.beginElement+'&limit='+this.countElement)
	    .timeout(20000)
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.postlists_new = data.data;  // Записали новую порцию данных
              this.countElement = data.count;
  			  this.post_error = "0";

			  for (let i = 0; i < this.countElement; i++) {
    			this.postlists.push( this.postlists_new[i] );  // Добавили новые данные в основной массив публикаций
			  }
			  
		      infiniteScroll.complete();
            }, 1000);

          },
          err => console.error(err)
      );
	  
	}else{
	  infiniteScroll.complete();
	}
  }
  
  // Выполняется при потягивании списка вниз, когда список находится в верхнем положении
  doRefresh(refresher) {
    
	this.loadData(0);
    
	setTimeout(() => {
      refresher.complete();
    }, 2000);
  }
    
  ionViewDidLoad() {
    console.log('ionViewDidLoad Postlist');
  }

}

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import { LoadingController } from 'ionic-angular';
import { Postlist } from '../postlist/postlist';

@Component({
  selector: 'page-categorylist',
  templateUrl: 'categorylist.html',
})
export class Categorylist {

  categorylists: any;
  post_error: string;
  
  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, public loadingCtrl: LoadingController) {
    this.loadData();
  }

  openPostCategoryPage(item) {
    this.navCtrl.push(Postlist, { item: item, type: '1' });	
  }
  
  loadData() {
      // Создаем окно загрузки
      let loadingPopup = this.loadingCtrl.create({
        content: ''
      });

      // Показываем окно загрузки
      loadingPopup.present();	
	
      // Получение данных, с указание URL-запроса
      this.http.get('https://mysite.ru//categorylist.php')
	    .timeout(20000)
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.categorylists = data.data;
  			  this.post_error = "0";
              loadingPopup.dismiss();
            }, 1000);

          },
          err => {
			loadingPopup.dismiss();
			this.post_error = "1";
		  }
      );	
		  
  }
  
  // Выполняется при потягивании списка вниз, когда список находится в верхнем положении
  doRefresh(refresher) {
    
	this.loadData();
    
	setTimeout(() => {
      refresher.complete();
    }, 2000);
  }
  
  ionViewDidLoad() {
    console.log('ionViewDidLoad Categorylist');
  }

}

<ion-header>
  <ion-navbar color="clmain">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Категории</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Потяните для обновления"
      refreshingSpinner="circles"
      refreshingText="Обновление...">
    </ion-refresher-content>
  </ion-refresher>
  
  <div *ngIf="post_error == '0'">
  <ion-list>
    <button ion-item *ngFor="let categorylist of categorylists" (click)="openPostCategoryPage(categorylist)" text-wrap class="list-selected">
      <ion-avatar item-left>
        <img [src]="categorylist.icon" />
      </ion-avatar>
	  <ion-label class="categorylist-title">{{categorylist.category}}</ion-label>
    </button>
  </ion-list>
  </div>
  <div *ngIf="post_error == '1'" style="text-align: center">
    <ion-label>Ошибка при получении данных</ion-label>
    <button ion-button (click)="loadData(0)" color="clmain" icon-left>
	  <ion-icon name="refresh"></ion-icon>
	  Обновить
    </button>
  </div>
  
</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import { LoadingController } from 'ionic-angular';
import { Postlist } from '../postlist/postlist';

@Component({
  selector: 'page-authorlist',
  templateUrl: 'authorlist.html',
})
export class Authorlist {

  authorlists: any;
  authorlists_new: any;
  countElement: number = 40;
  beginElement: number = 0;
  post_error: string;
  
  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, public loadingCtrl: LoadingController) {
	this.loadData(0);
  }

  openPostAuthorPage(item) {
    this.navCtrl.push(Postlist, { item: item, type: '2' });	
  }
  
  loadData(isNew) {
    if (isNew==0){
	  // Первоначальные значения переменных
	  this.beginElement = 0;
	  this.countElement = 40;

      // Создаем окно загрузки
      let loadingPopup = this.loadingCtrl.create({
        content: ''
      });

      // Показываем окно загрузки
      loadingPopup.present();	
	
      // Получение данных, с указание URL-запроса и параметров
      this.http.get('https://mysite.ru/authorlist.php?begin='+this.beginElement+'&limit='+this.countElement)
	    .timeout(20000)
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.authorlists = data.data;
              this.countElement = data.count;
  			  this.post_error = "0";
              loadingPopup.dismiss();
            }, 1000);

          },
          err => {
			loadingPopup.dismiss();
			this.post_error = "1";
		  }
      );	
	  
	}else{
	  // Увеличиваем начальную позицию номера публикации для последующего получения именно с нужной позиции
	  this.beginElement = Number(this.beginElement) + Number(this.countElement);
	
	}
  }
  
  // Выполняется при пролистывании к последнему элементу списка
  doInfinite(infiniteScroll) {

	// Проверяем нужно ли выполнять запрос
	// Если в предыдущем запросе мы получили 0 публикаций,
	//   значит больше не нужно выполнять запрос для получения СЛЕДУЮЩЕГО набора данных
	if (this.countElement != 0){
      this.loadData(1);

      // Получение данных, с указание URL-запроса и параметров
      this.http.get('https://mysite.ru/authorlist.php?begin='+this.beginElement+'&limit='+this.countElement+'&t='+this.searchtext)
	    .timeout(20000)
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.authorlists_new = data.data;
              this.countElement = data.count;
  			  this.post_error = "0";
			  
			  for (let i = 0; i < this.countElement; i++) {
			    this.authorlists.push( this.authorlists_new[i] );
			  }

			  infiniteScroll.complete();
            }, 1000);

          },
          err => console.error(err)
      );	
	
	}else{
	  infiniteScroll.complete();
	}
  }
  
  // Выполняется при потягивании списка вниз, когда список находится в верхнем положении
  doRefresh(refresher) {
    
	this.loadData(0);
    
	setTimeout(() => {
      refresher.complete();
    }, 2000);
  }
  
  ionViewDidLoad() {
    console.log('ionViewDidLoad Authorlist');
  }

}

<ion-header>
  <ion-navbar color="clmain">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Авторы</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="android-scroll-bar">
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Потяните для обновления"
      refreshingSpinner="circles"
      refreshingText="Обновление...">
    </ion-refresher-content>
  </ion-refresher>

  <div *ngIf="post_error == '0'">
  <ion-list>
    <button ion-item *ngFor="let authorlist of authorlists" (click)="openPostAuthorPage(authorlist)" text-wrap class="list-selected">
      <ion-avatar item-left>
        <img [src]="authorlist.img" />
      </ion-avatar>
	  <ion-label class="authorlist-title">{{authorlist.author}}</ion-label>
    </button>
  </ion-list>
  </div>
  <div *ngIf="post_error == '1'" style="text-align: center">
    <ion-label>Ошибка при получении данных</ion-label>
    <button ion-button (click)="loadData(0)" color="clmain" icon-left>
	  <ion-icon name="refresh"></ion-icon>
	  Обновить
    </button>
  </div>
  
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Загрузка данных...">	
	</ion-infinite-scroll-content>
  </ion-infinite-scroll>
 
</ion-content>

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import { LoadingController } from 'ionic-angular';

@Component({
  selector: 'page-postlist',
  templateUrl: 'postlist.html',
})
export class Postlist {

  title: string;
  categoryId: any;
  authorId: any;
  selectedItem: any;
  selectedType: string;
  postlists: any;            // данные со списком публикаций, полученные из запроса
  postlists_new: any;        // данные СЛЕДУЮЩЕГО списка публикаций, которые получаются при пролистывании списка к последнему элементу
  countElement: number = 10; // кол-во элементов, которые мы получаем из запроса
  beginElement: number = 0;  // начальный номер публикации, с которого получаем список элементов
  post_error: string;        // результат выполнения запроса 0-успешно, 1-ошибка
  
  constructor(public navCtrl: NavController, public http: Http, public loadingCtrl: LoadingController, public navParams: NavParams) {
	this.selectedItem = navParams.get('item');	
	this.selectedType = navParams.get('type');	
	
	this.categoryId = '';
	this.authorId = '';
	
	this.title = 'Публикации';
	if (this.selectedType == '1'){
		this.title = this.selectedItem.category;
		this.categoryId = this.selectedItem.id;
	}
	
	if (this.selectedType == '2'){
		this.title = this.selectedItem.author;
		this.authorId = this.selectedItem.id;
	}
	
	// Метод получения данных из запроса
	// 0 - получаем данные с самого начала
	// 1 - получаем СЛЕДУЮЩИЕ данные по порядку
	this.loadData(0);
  }

  loadData(isNew) {
    if (isNew==0){
	  // Первоначальные значения переменных
	  this.beginElement = 0;
	  this.countElement = 10;
  
      // Создаем окно загрузки
      let loadingPopup = this.loadingCtrl.create({
        content: ''
      });

      // Показываем окно загрузки
      loadingPopup.present();	
	
      // Получение данных, с указание URL-запроса и параметров
      this.http.get('https://mysite.ru/postlist.php?begin='+this.beginElement+'&limit='+this.countElement+'&c='+this.categoryId+'&a='+this.authorId)
	    .timeout(20000)   // Ставим лимит на получение запроса и прерываем запрос через 20 сек.
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.postlists = data.data;     // Данные получены, записываем их
              this.countElement = data.count; // Записываем кол-во полученных публикаций
  			  this.post_error = "0";          // Результат - успешно
              loadingPopup.dismiss();         // Убираем окно загрузки
            }, 1000);

          },
          err => {
			loadingPopup.dismiss();           // Убираем окно загрузки
			this.post_error = "1";            // Результат - ошибка
		  }
      );	
	
	}else{
	  // Увеличиваем начальную позицию номера публикации для последующего получения именно с нужной позиции
	  this.beginElement = Number(this.beginElement) + Number(this.countElement);
	}
  }
  
  // Выполняется при пролистывании к последнему элементу списка
  doInfinite(infiniteScroll) {

	// Проверяем нужно ли выполнять запрос
	// Если в предыдущем запросе мы получили 0 публикаций,
	//   значит больше не нужно выполнять запрос для получения СЛЕДУЮЩЕГО набора данных
	if (this.countElement != 0){
      this.loadData(1);

      // Получение данных, с указание URL-запроса и параметров
      this.http.get('https://mysite.ru/postlist.php?begin='+this.beginElement+'&limit='+this.countElement+'&c='+this.categoryId+'&a='+this.authorId)
	    .timeout(20000)
        .map(res => res.json())
        .subscribe(
          data => {

            setTimeout(() => {
              this.postlists_new = data.data;  // Записали новую порцию данных
              this.countElement = data.count;
  			  this.post_error = "0";

			  for (let i = 0; i < this.countElement; i++) {
    			this.postlists.push( this.postlists_new[i] );  // Добавили новые данные в основной массив публикаций
			  }
			  
		      infiniteScroll.complete();
            }, 1000);

          },
          err => console.error(err)
      );
	  
	}else{
	  infiniteScroll.complete();
	}
  }
  
  // Выполняется при потягивании списка вниз, когда список находится в верхнем положении
  doRefresh(refresher) {
    
	this.loadData(0);
    
	setTimeout(() => {
      refresher.complete();
    }, 2000);
  }
    
  ionViewDidLoad() {
    console.log('ionViewDidLoad Postlist');
  }

}

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';
import { LoadingController } from 'ionic-angular';

Component({
selector: 'page-post',
templateUrl: 'post.html',
})
export class Post {

selectedItem: any;
postphotos: any;
post_category: any;
post_author: any;
post_author_id: any;
post_author_img: any;
post_title: any;
post_dat3: any;
post_intro_text: any;
post_full_text: any;
post_img: any;
post_is_photo: any;
post_error: string;

constructor(public navCtrl: NavController, public http: Http, public loadingCtrl: LoadingController, public navParams: NavParams) {
this.selectedItem = navParams.get('item');

this.loadData();
}

loadData() {
// Создаем окно загрузки
let loadingPopup = this.loadingCtrl.create({
content: ''
});

// Показываем окно загрузки
loadingPopup.present();

// Получение данных, с указание URL-запроса и параметров
this.http.get('https://mysite.ru/post.php?p='+this.selectedItem.id)
.timeout(20000)
.map(res => res.json())
.subscribe(
data => {

setTimeout(() => {
this.postphotos = data.data;
this.post_category = data.category;
this.post_author = data.author
this.post_author_id = data.author_id;
this.post_author_img = data.author_img;
this.post_title = data.title;
this.post_dat3 = data.dat3;
this.post_intro_text = data.intro_text;
this.post_full_text = data.full_text;
this.post_img = data.img;
this.post_is_photo = data.is_photo;
this.post_error = «0»;
loadingPopup.dismiss();
}, 1000);

},
err => {
loadingPopup.dismiss();
this.post_error = «1»;
}
);

}

// Выполняется при потягивании списка вниз, когда список находится в верхнем положении
doRefresh(refresher) {

this.loadData();

setTimeout(() => {
refresher.complete();
}, 2000);
}

ionViewDidLoad() {
console.log('ionViewDidLoad Post');
}

}

<ion-header>
  <ion-navbar color="clmain">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Содержание</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="Потяните для обновления"
      refreshingSpinner="circles"
      refreshingText="Обновление...">
    </ion-refresher-content>
  </ion-refresher>
  
  <div *ngIf="post_error == '0'">
    <h3></h3>
	  <div>
	    <div class="post-category">{{post_category}}</div>
	    <div class="post-dat">{{post_dat3}}</div>
	  </div>
	  <h3 class="post-title">{{post_title}}</h3>
      <img *ngIf="post_is_photo != '1'" src="{{post_img}}" />
	  <h5 class="post-intro-text">{{post_intro_text}}</h5>
	  <div class="post-text" [innerHTML] = "post_full_text"></div>
  
    <button ion-item>
      <ion-avatar item-left>
        <img [src]="post_author_img" />
      </ion-avatar>
	  <ion-label class="author-title">{{post_author}}</ion-label>
	</button>
  </div>
  <div *ngIf="post_error == '1'" style="text-align: center">
    <ion-label>Ошибка при получении данных</ion-label>
    <button ion-button (click)="loadData(0)" color="clmain" icon-left>
	  <ion-icon name="refresh"></ion-icon>
	  Обновить
    </button>
  </div>

</ion-content>

page-post {

	.post-title {
		font-size: 19px !important;
		white-space: inherit;
	}

	.post-intro-text {
		font-size: 15px !important;
		color: gray;
		white-space: inherit;
	}

	.post-dat {
		font-size: 14px !important;
		color: gray;
		white-space: inherit;
		float: right;
		text-align: right;
		width: 50%;
	}

	.post-category {
		font-size: 14px !important;
		color: gray;
		white-space: inherit;
		float: left;
		width: 50%;
	}

	.post-text {
		font-size: 16px !important;
	}

}