The Ionic Advantage

The Ionic advantage:-
1) Navigation stack for ionic has router encapsulated and is easier to use, Inbuilt side
menu or Hamburger menu navigation.
2) UI Themes are based on the platform, ionic renders for iOS, Android and Windows
based on the themes and style of the platform.
3) Seamless integration to Angular and Cordova, uses gulp, Typescript and SASS for css
compilation, which is more or less same to what we are using.
4) Aggressive caching for screen navigation, virtual list controls for scrolling extremely
long list.
5) Offers a wide variety of customization to elementary controls and provides new
controls.
6) Angular can also be used when needed.
7) Ionic Native is a TypeScript wrapper for Cordova/PhoneGap plugins that make
adding any native functionality you need to your Ionic mobile app easy. Requires
ionic Appflow login may be licensed
8) Deploy push your apps in real time , it is paid https://ionicframework.com/docs/appflow/deploy/
9) Generate icons and splash screens for all devices and device sizes with a single
command: ionic cordova resources. This alone saves you at least a day of image
preparing for various sizes.
share your Ionic apps with clients, customers, and testers all around the world without ever going
through the App Store with ionic upload
Create project online:-

 https://creator.ionic.io -Good for prototyping and has drag and drop features to
put controls in html.
 https://stackblitz.com/
Installation on local machine:-
https://ionicframework.com/docs/intro/installation/
npm install -g ionic cordova
ionic start helloWorld blank
cd helloWorld
ionic serve
ionic start MyIonicProject tutorial
Sensitivity: Internal & Restricted

 To add Cordova support from the beginning
ionic start myApp tabs –cordova
 To list the types of projects available

ionic start –list
Note: Error’s are shown in the browser without the need of inspect when we perform ionic
serve and when the error is resolved it shows the progress in the browser as well.
we can run the app for Cordova and ionic from the same directory and it will be easier to debug
as ionic serve can let us host the content from same directory, we do not have to install plugin
again and again to check the html or typescript errors.
Project Structure
Index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, 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">


<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<script src="cordova.js"></script>

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

<ion-app></ion-app>


<script src="build/polyfills.js"></script>

<script src="build/vendor.js"></script>

<script src="build/main.js"></script>
</body>
</html>
app.component.ts
import { Platform } from 'ionic-angular';
export class MyApp {

rootPage:any = HomePage;
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();
});
}

}
app.html
<ion-nav [root]="rootPage"></ion-nav>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';

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 { MyApp } from './app.component';

import { HomePage } from '../pages/home/home';
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
pages
home.html
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</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>
Home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController) {
}}

Config.xml
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
Command line:-
To run ionic from command line
ionic-app-scripts build --target cordova --platform android

Typing ionic will give us the set of results for ionic
Ionic start –list - list of project available

Ionic start <projectname> blank
Ionic serve ---has live reload as angular
In project directory
Typing ionic will list other set of command required for project
Ionic cordova platform – will add the cordova support to the project
{Need to connect to open network, as proxy issues are seen here}

 It will create the config.xml
 It will create a resources directory with platform specific resources
Ionic cordova platform add android => will add android platform
Ionic build android => will build for android
Ionic cordova run android
It will trigger below command internally ionic-app-scripts build --target cordova --platform
android
Important points:-
1) Default ionic uses scss
2) Folder theme has variables.scss to style globally
3) Ionic.config.json contains basic ionic configuration for the ionic app
4) Resources folder contains media for icons and splash screens
Known to us from cordova projects
5) Tsconfig.json is for typescript configuration
6) Config.xml is for cordova
7) Package.json is for angular packages
8) Ionic loads icons based on platform
If we run ionic cordova run browser and then choose android as emulator we see a different
theme of buttons and if we choose iOS and refresh we see a different theme of buttons.
Ionic lifecycle events:-

 ionViewDidLoad (occurs the first time it comes to navigation stack, or if it gets popped
out of navigations stack)
 ionViewWillEnter (occurs right before the view is navigated and shown, will always fire
even if the page is previously loaded)
 ionViewDidEnter(occurs right after view is navigated and shown to the user)
 ionViewWillLeave(occurs right before the view is navigated away from)
 ionViewDidLeave(occurs right after the view is navigated away from)
 ionViewWillUnload(occurs right before a view is being unloaded, it will unload a view
completely, when it is poped out from the navigations stack)
 ionViewCanEnter (occurs right before the view is shown, it can be used in scenarios
where authentication is required, can act as a guard)
 ionViewCanLeave(occurs right before the view leaves, can this of it as a guard, to check
for authentication, form validation etc.)

Ionic 2 Navigation stack
Ionic does support multiple navigation stack for example tab navigation
Ionic does caching of pages
Shortcuts
 Generate a new page in ionic along with the module
ionic generate page testpage
Creates the module and the component typescript file with additional decorator
@IonicPage() before the @Component declaration
 Generate a new page with no module
ionic generate page testpage –-no-module
When we create new components as we do it in angular we need to add the component in

declarations and entryComponents sections of @NgModule
if we use NavController then the navigation can be done with a simple call to the push method and this
will push the page into the stack and navigate, the routing mechanism is encapsulated.
Creating a hamburger menu

<ion-menu [content]="content">
<ion-header>
<ion-toolbar>
<ion-title>
Elite Schedule
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
Navigate
</ion-list-header>
<button menuclose ion-item (click)="goHome()">Home</button>
<button menu-close ion-item (click)="goToTournament()">Find a
Tournament</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

It has the view child to get the Nav for home page
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav:Nav;
import {IonicPage , NavController, NavParams } from 'ionic-angular';
constructor(private nav: NavController){
goToTournaments(){
this.nav.push(TournamentsPage);
}
To navigate back use the pop method of NavController
navigateBack(){
this.navCtrl.pop();
If a page has <ion-navbar> directive backbutton will automatically appear
<ion-header>
<ion-navbar>
<ion-title>Tournaments</ion-title>
</ion-navbar>
</ion-header>
Enables swipeBackEnabled="true” enables swipe back feature
<ion-nav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

To check the icons available in ionic use below url, it also has material design icons
https://ionicframework.com/docs/ionicons/
sets the root to teamDetailTab for “Team” which has the value TeamDetailPage
<ion-tabs>
<ion-tab tabTitle="Team" [root]="teamDetailTab" tabIcon="basketball"></ion-tab>
<ion-tab tabTitle="Standings" [root]="standingsTab" tabIcon="podium"></ion-tab>
</ion-tabs>
public teamDetailTab = TeamDetailPage;

public standingsTab = StandingsPage;
To pass a parameter to the tab while navigating to the tabs bind data to rootParams
Tabs are inside their own navigation stack as an ionic application can have multiple navigation stack
<ion-tabs>
<ion-tab tabTitle="Team" [root]="teamDetailTab" [rootParams]="team"
tabIcon="basketball"></ion-tab>
<ion-tab tabTitle="Standings" [root]="standingsTab" [rootParams]="team"
tabIcon="podium"></ion-tab>
</ion-tabs>
Placing just an icon in on the right end of the navigation bar
<ion-header>
<ion-navbar color="primary">
<ion-title>{{team.name}}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="goHome()">
<ion-icon name="home"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
popToRoot() method takes us to the home page.
goHome() {
this.navCtrl.popToRoot();
}
An ionic html page is divided into
<ion-header>
</ion-header>

<ion-content>
</ion-content>
Inside a tab if we have to go to a root page, we have to call the parents popToRoot method.
We might have to use this.navCtrl.parent.parent.popToRoot();
Note : NavController automatically adds a back button when navigating pages.
Generating a provider
ionic generate provider <ProviderName>
https://ionicframework.com/docs/native/
Ionic Native wraps plugin callbacks in a Promise or an Observable, providing a common

interface for all plugins and ensuring that native events trigger change detection in Angular.
import { Geolocation } from '@ionic-native/geolocation';
import { Platform } from 'ionic-angular';
class MyComponentOrService {
constructor(private platform: Platform, private geolocation: Geolocation) {
platform.ready().then(() => {
// get current position

geolocation.getCurrentPosition().then(pos => {
console.log('lat: ' + pos.coords.latitude + ', lon: ' +
pos.coords.longitude);
});
const watch = geolocation.watchPosition().subscribe(pos => {

console.log('lat: ' + pos.coords.latitude + ', lon: ' +
pos.coords.longitude);
});
// to stop watching
watch.unsubscribe();
});

Runtime Diagnostics
Spent way too long diagnosing an issue only to realize a plugin wasn’t firing or installed?
Ionic Native lets you know what the issue is and how you can resolve it.
Installation
To add Ionic Native to your app, run following command to install the core package:
npm install @ionic-native/core --save
Note that Ionic Native core package is included by default with every Ionic app.
Usage
Install the Needed Plugins
Install the Ionic Native package for each plugin you want to add.
For example, if you want to install the Camera plugin, you will need to run the following
command:
npm install @ionic-native/camera --save
Then install the plugin using Cordova or Ionic CLI.
For example:

ionic cordova plugin add cordova-plugin-camera
All package names are documented on the plugin’s documentation. It is recommended to
follow the installation instructions on each plugin’s documentation, as some plugins require
additional steps to fully install.
Add Plugins to Your App's Module
After installing a plugin’s package, add it to your app’s NgModule.
...
import { Camera } from '@ionic-native/camera';
...
@NgModule({
...
providers: [
...
Camera
...
...
})

export class AppModule { }
<ion-list>
<ion-item *ngFor="let game of games">
{{game.opponent}}
</ion-item>
</ion-list>
<ion-list>
<button ion-item *ngFor="let item of favorites">
<ion-icon name="star"></ion-icon>
{{item.team.name}}
</button>
</ion-list>
Ionic icons come with 700+ ionicons
In package.json we have a package ionicons to use ionic icons
https://ionicframework.com/docs/ionicons
we can search the icon here using the above link
below example is to create icon specific to iOS

<ion-icon ios="ios-contact" md="md-contact"></ion-icon>
The grid system in ionic is extremely useful it is based on flex box, its similar to implementation in
bootstrap.
ToDo: check the usage of entryComponents section in NgModule

ToDo : Explore plugman

The Ionic Advantage

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

The Ionic Advantage

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

The Ionic Advantage

Uploaded by

Copyright:

Available Formats

The Ionic advantage:-

Create project online:-

ionic start helloWorld blank

ionic start MyIonicProject tutorial

Sensitivity: Internal & Restricted

 To list the types of projects available

<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">

<!-- un-comment this code to enable service worker

Sensitivity: Internal & Restricted

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

<!-- The vendor js is generated during the build process

import { Platform } from 'ionic-angular';

export class MyApp {

constructor(platform: Platform, statusBar: StatusBar, splashScreen:

Sensitivity: Internal & Restricted

import { BrowserModule } from '@angular/platform-browser';

import { MyApp } from './app.component';

Sensitivity: Internal & Restricted

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

constructor(public navCtrl: NavController) {

Sensitivity: Internal & Restricted

<allow-intent href="sms:*" />

<allow-intent href="mailto:*" />

<allow-intent href="geo:*" />

<preference name="ScrollEnabled" value="false" />

<preference name="android-minSdkVersion" value="19" />

<preference name="BackupWebStorage" value="none" />

<preference name="SplashMaintainAspectRatio" value="true" />

<preference name="FadeSplashScreenDuration" value="300" />

<preference name="SplashShowOnlyFirstTime" value="false" />

<preference name="SplashScreen" value="screen" />

<preference name="SplashScreenDelay" value="3000" />

ionic-app-scripts build --target cordova --platform android

Ionic start –list - list of project available

Ionic serve ---has live reload as angular

Sensitivity: Internal & Restricted

Ionic lifecycle events:-

Sensitivity: Internal & Restricted

When we create new components as we do it in angular we need to add the component in

Creating a hamburger menu

<ion-nav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

Sensitivity: Internal & Restricted

import {IonicPage , NavController, NavParams } from 'ionic-angular';

constructor(private nav: NavController){

To navigate back use the pop method of NavController

If a page has <ion-navbar> directive backbutton will automatically appear

Enables swipeBackEnabled="true” enables swipe back feature

<ion-nav [root]="rootPage" #content swipeBackEnabled="true"></ion-nav>

Sensitivity: Internal & Restricted

public teamDetailTab = TeamDetailPage;

Placing just an icon in on the right end of the navigation bar

An ionic html page is divided into

Sensitivity: Internal & Restricted

We might have to use this.navCtrl.parent.parent.popToRoot();