Getting Started with Ionic 2 (Beeps.ir)

Add Android Platform

ionic platform add android

Add IOS Platform

ionic platform add ios

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';

import { HomePage } from '../pages/home/home';

@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    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();
    });
  }
}

app.module.ts

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

import { HomePage } from '../pages/home/home';
import { Details } from '../pages/details/details';
import { GetUsers } from '../providers/get-users';
import { Capitalize } from '../pipes/capitalize';

@NgModule({
  declarations: [
    MyApp,
    HomePage, 
    Details,
    Capitalize
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Details
  ],
  providers: [GetUsers]
})
export class AppModule { }

Build Android App

ionic build android

Build IOS App

ionic build ios

capitalize.ts

import { Injectable, Pipe } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
@Injectable()
export class Capitalize {

  transform(value, args) {
    if (value) {
      return value.replace(/\w\S*/g, function (value) {
        return value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
      })
    }
    return value;
  }
}

Create New Project

ionic start showUsersInfo blank --v2

Default app.module.ts

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule { }

details.html

<ion-header>
	<ion-navbar text-center color="primary">
		<ion-title>{{user.name.title + " " + user.name.first + " " + user.name.last | capitalize}}</ion-title>
	</ion-navbar>
</ion-header>

<ion-content>
	<ion-card>
		<ion-card-header>
			<span item-left color="danger">@{{user.login.username}}</span>
			<ion-icon style="float:right" name="md-male" *ngIf="user.gender === 'male'"></ion-icon>
			<ion-icon style="float:right" name="md-female" *ngIf="user.gender === 'female'"></ion-icon>
		</ion-card-header>
		<img [src]="user.picture.medium">
		<ion-list>
			<ion-item>
				<ion-icon name="md-at"></ion-icon>
				{{user.email}}
			</ion-item>
			<ion-item>
				<ion-icon name="ios-call"></ion-icon>
				{{user.phone}}
			</ion-item>
			<ion-item text-nowrap>
				<ion-icon name="md-pin"></ion-icon>
				{{user.location.street + " - " + user.location.city + " - " + user.location.state}}
			</ion-item>
		</ion-list>
	</ion-card>
</ion-content>

details.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { User } from '../../models/user';

@Component({
  selector: 'page-details',
  templateUrl: 'details.html'
})
export class Details {
  user: User;

  constructor(public navCtrl: NavController, public paramCtrl: NavParams) { } 

  ionViewDidLoad() {
    this.user = this.paramCtrl.get("user");
  }
}

Generate Capitalize Pipe

ionic g pipe capitalize

Generate Details Page

ionic g page details

Generate GetUsers Provider

ionic g provider GetUsers

get-user.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class GetUsers {

  constructor(public http: Http) { }

  getUsersInfo(numberOfUsers: number) {
    return new Promise((resolve, reject) => {
      this.http.get('https://randomuser.me/api/?results=' + numberOfUsers)
        .map(res => res.json())
        .subscribe(data => {
          resolve(data.results);

        }, err => reject(JSON.stringify(err)))
    });
  }
}

home.html

<ion-header>
	<ion-navbar color="primary">
		<ion-title text-center>
			Show Users Info App
		</ion-title>
	</ion-navbar>
  <ion-toolbar color="primary">
    <ion-searchbar placeholder="Search..." (ionInput)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content>
	<ion-list>
		<button ion-item *ngFor="let user of users" (click)="gotoDetails(user)">
			<ion-avatar item-left>
				<img [src]="user.picture.thumbnail">
			</ion-avatar>
			<h2>{{user.name.first + " " + user.name.last | uppercase }}</h2>
      <p>@{{user.login.username}}</p>
		</button>
	</ion-list>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, LoadingController } from 'ionic-angular';

import { Details } from '../../pages/details/details';

import { GetUsers } from '../../providers/get-users';
import { User } from '../../models/user';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  users: User[];
  tmpUsers: User[];
  numberOfResults: number;
  constructor(public navCtrl: NavController, public userCtrl: GetUsers, public loadingCtrl: LoadingController) {

    this.numberOfResults = 15;
    this.loadData(this.numberOfResults);
  } 
 
  loadData(numberOfUsers) {
    let loading = this.loadingCtrl.create({
      content: 'Loading...'
    });
    loading.present();

    this.userCtrl.getUsersInfo(numberOfUsers)
      .then(data => {
        this.users = <User[]>data;
        this.tmpUsers = <User[]>data;
        loading.dismiss();
      })
      .catch(err => {
        console.log(err);
        loading.dismiss();
      });
  }

  getItems(ev: any) {
    this.users = this.tmpUsers.slice();

    let val = ev.target.value;

    if (val && val.trim() != '') {
      this.users = this.users.filter((item) => {
        return (item.name.first.toLowerCase().indexOf(val.toLowerCase()) > -1 ||
          item.name.last.toLowerCase().indexOf(val.toLowerCase()) > -1);
      })
    }
  }

  gotoDetails(user) {
    this.navCtrl.push(Details, { "user": user });
  }
}

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8">
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">

  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  </script>-->

  <link href="build/main.css" rel="stylesheet">

</head>
<body>

  <!-- Ionic's root component and where the app will load -->
  <ion-app></ion-app>

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>

  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>

  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>

</body>
</html>

Install Ionic CLI and Cordova

npm install -g ionic
npm install -g cordova

Install ios Node Modules

npm install -g ios-deploy
npm install -g ios-sim version

Install TypeScript

npm install -g typescript

LoadData-Function.ts

loadData(numberOfUsers) {
    let loading = this.loadingCtrl.create({
      content: 'Loading...'
    });
    loading.present();

    this.userCtrl.getUsersInfo(numberOfUsers)
      .then(data => {
        this.users = <User[]>data;
        this.tmpUsers = <User[]>data;
        loading.dismiss();
      })
      .catch(err => {
        console.log(err);
        loading.dismiss();
      });
  }

Open Project Root

cd showUsersInfo

Project Structure

├── config.xml
├── hooks
├── ionic.config.json
├── node_modules
├── package.json
├── platforms
├── plugins
├── resources
├── src
├── tsconfig.json
├── tslint.json

Promise Syntax

new Promise(function(resolve, reject) { ... });

Promise Syntax (Arrow Function)

new Promise((resolve, reject) => { ... });

Run Android App

ionic run android

Run IOS App

ionic run ios

Serve Project

ionic serve

Serve Project by Library Mode

ionic serve --l

user.ts

export interface User {
    gender: string;
    name: { title: string, first: string, last: string }
    location: { street: string, city: string, state: string };
    email: string;
    login: { username: string, password: string };
    phone: number;
    picture: { large: string, medium: string; thumbnail: string };
}