IONIC

======================== How To install ionic  =====================================
1. node js
2. npm install -g ionic cordova

======================== Create APP ===============================================

1.  ionic start helloWorld blank

> Try Ionic 4? (y/N)
> Starter template: (Use arrow keys)
❯ tabs     | A starting project with a simple tabbed interface
  blank    | A blank starter project
  sidemenu | A starting project with a side menu with navigation in the content
area
  super    | A starting project complete with pre-built pages, providers and bes
t practices for Ionic development.
  tutorial | A tutorial based project that goes along with the Ionic documentati


Install the free Ionic Pro SDK and connect your app? (Y/n)
> Y

? What would you like to do?
  Link an existing app on Ionic Pro
❯ Create a new app on Ionic Pro         <-|
? Which git host would you like to use? Ionic Pro
> ionic config set pro_id "43bb5181" --json
[OK] pro_id set to "43bb5181"!
2. Desktop$ cd project_directory/
3. Desktop/project_directory$ ionic serve


> src/index.html is the main entry point for the app, though its purpose is to set up scripts, CSS includes, and bootstrap, or start running our app. We won’t spend much of our time in this file.


Cordova

Cordova is a way to transform standard HTML/CSS/JS into a full-fledged native app. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone.

Dependency Injection

Dependency injection is a pattern used by Angular to resolve or "inject" dependencies into a module. The injector finds the instance of the dependency being requested, and passes or "injects" this instance to the module.

When we run ionic serve, our code inside of src/ is transpiled into the correct JavaScript version that the browser understands (currently ES5).That means we can work at a higher level using TypeScript, but compile down to the older form of JavaScript the browser needs.

--------


Navigating Lifecycle Events!
By Enrique Oriol on November 29, 2016 in Ionic Ionic 2 Tutorials

Enrique Oriol is the CTO of a Barcelona-based startup and frequently writes about Ionic in Spanish on his blog, where this post originally appeared. He also teaches Ionic 2 at Udemy.

In native apps (iOS, Android), views have a well structured lifecycle that allows you to perform actions on key points of their execution. Ionic 2 has a similar feature: Navigation Lifecycle Event.

ios native view lifecycle image

In Ionic 2, any view added or removed from a NavController emits certain events. You can take advantage of those events to instantiate the view, refresh content, or store data.

I’ll teach you how to use them in a hands-on code example, but first, let’s dig into the concept!
Lifecycle events

Ionic 2 Navigation events are quite similar to those from iOS. Here’s a diagram that explains how they work:

ionic view lifecycle events image

In summary, these are the events:

    ionViewDidLoad: Fired only when a view is stored in memory. This event is NOT fired on entering a view that is already cached. It’s a nice place for init related tasks.

    ionViewWillEnter: It’s fired when entering a page, before it becomes the active one. Use it for tasks you want to do every time you enter in the view (setting event listeners, updating a table, etc.).

    ionViewDidEnter: Fired when entering a page, after it becomes the active page. Quite similar to the previous one.

    ionViewWillLeave: Fired when you leave a page, before it stops being the active one. Use it for things you need to run every time you are leaving a page (deactivate event listeners, etc.).

    ionViewDidLeave: Fired when you leave a page, after it stops being the active one. Similar to the previous one.

    ionViewWillUnload: Fired when a view is going to be completely removed (after leaving a non-cached view).
----
Tip: 1000 ms = 1 second.

==================== How add pages in module.ts / component.ts / page.ts ================================================
> src/app/app.module.ts is the entry point for our app.

> ionic generate <type> <type_name>
> ionic generate page pagename

> Copy import path ( import { SigninPage } from './signin'; // Correct this path according to directory structure in app.module.ts ) from
pagename.module.ts
And paste it to app.module.ts along with adding pagename inside declarations and entryComponents.

++ IN app.module.ts ++

import { ImagePage } from '../pages/image/image';
 declarations: [
    ImagePage
  ],

 entryComponents: [
    ImagePage
    ],

++ IN componenet.ts ++  import { ImagePage } from '../pages/image/image'; }

++ IN page.ts ++   import { LoginPage } from '../login/login'; 

++++++++++++ Redirect from one page to other +++++++++++
> Open old page and put a button to navigate current page to other
eg: <button ion-button color="light" (click)="signin()" > Sign In </button>

> Now go to old page.ts and define that button click method to perform click function accordingly.
 * import new page path in old page.
 signin()
 {
this.navCtrl.push( newpagename );
 }

>



================================= How use HTTP ================================
++ IN app.module.ts ++

import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';


imports: [
    HttpClientModule,
    HttpModule,
    ]
   
+++ IN page.ts ++

import { Http,Headers} from '@angular/http';
import 'rxjs/add/operator/map';


constructor( public http: Http )   ;

this.http.get('apiurl').map(res => res.json())
      .subscribe(res =>  {
     
  }, (err) => {
      console.log(err);
        });
       
 ----- post method----
 this.http.post(apiUrl+'Regestier', JSON.stringify(data), {headers: headers})
.subscribe(res => {
    resolve(res.json());
}, (err) => {
    reject(err);
});     
*******  ************

If you want to return an Observable some other code can subscribe to, but you still want to manipulate the data events in the current method, use map.
The actual user of the observable needs to subscribe(), because without subscribe() the observable won't be executed at all. (forEach() or toArray() and probably others work as well to execute the observable instead of subscribe())
subscribe() returns a Subscription that can not be subscribed to, but it can be used to cancel the subscription.
map() returns an Observable which can be subscribed to.

***** *****************
==================================== Provider ====================================
++ IN app.module.ts   ++

import { AuthserviceProvider } from '../providers/authservice/authservice';

providers: [AuthserviceProvider,],

++ In page.ts  ++

import { AuthserviceProvider } from '../../providers/authservice/authservice';
constructor(private authservice: AuthserviceProvider)

this.authservice.signdata(userData).then((result) =>{

}, (err) => {
      console.log(err);
        });

++  IN provider  ++

signdata(){
return new Promise((resolve, reject) => {
.subscribe(res =>  { 
    resolve(res)
   }),
   (err) => {
     reject(err);
       }
 });
 }

=========================================  HOW Submit form data 'AND' validation  ============================
+++++ IN app.module.ts   +++++++++
import { ErrorHandler, NgModule } from '@angular/core';

providers: [
    {provide: ErrorHandler,},  ],

++++  IN page.html   ++++

<form [formGroup]="formgroup">
<ion-list>
 <ion-item>
    <ion-label fixed>Full Name</ion-label>
    <ion-input type="text" formControlName="fname" ></ion-input>
  </ion-item>
  <p class="help-block" *ngIf="fname.hasError('required') && fname.touched ">Full name is Required</p>
  <p class="help-block" *ngIf="fname.hasError('pattern') && fname.touched ">Enter valid full name</p>
</ion-list>
<button ion-button color="secondary" block (click)="Onsignup(formgroup.value)" [disabled]="!formgroup.valid">Sign Up</button>
</form>

+++++ IN page.ts  +++++

import { Validators, FormBuilder, FormGroup, AbstractControl } from '@angular/forms';

export class SignupPage {

  formgroup:FormGroup;
  fname:AbstractControl;
 
  constructor( private formBuilder: FormBuilder  ){
  this.formgroup = this.formBuilder.group({
      fname: ['',Validators.compose([Validators.required,Validators.pattern('^[a-zA-Z]+$')])],
    });
   
     this.fname =this.formgroup.controls['fname'];

  }
     logForm(){
    console.log(this.formgroup.value)
  }
 
  Onsignup(value){
   //work
  }
 
}
<input type="email" name="email" ng-model="someModelIamUsing" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})">
===============================================   How navigate page   ============================================

+++++++  IN page.ts      ++++++++++
import { SignupPage } from '../signup/signup';

type 1 =   this.navCtrl.setRoot(SignupPage); // when don't want to go previous page, set as root
type 2 =   this.navCtrl.push(SignupPage); // when want to go previous page

=============================================   HOW SET and GET data (session)  =====================================================
++++++++ IN app.module.ts   +++++++++++
import { IonicStorageModule } from '@ionic/storage';

imports: [     IonicStorageModule.forRoot(),   ],

+++++ IN page.ts  +++++++
import { Storage } from '@ionic/storage';
constructor(private storage : Storage)

SET DATA =  this.storage.set('islogin', true) ;

GET DATA   =  this.storage.get('islogin').then((val) => { work }); 
   
DELETE All DATA  =    this.storage.clear();
DELETE single DATA  =    this.storage.remove('key');

===============================================  JSON DATA from assets ==============================

 this.http.get('../../assets/dictionary.json').map(res => res.json()).subscribe( result => {  });

======================  HOW send data from one html page to other page   ==========================
++ page1.html  ++
(click)="show(item.message)"   

+++++   page1.ts ++++++

show(text)  {   his.navCtrl.push(MessagePage, {mykey:text} );   }

++++++++ page2.ts  ++++++++++++++

this.val = navParams.get('mykey');

{{val}}  // page2.html

================= ADD MAP ======================
https://www.joshmorony.com/ionic-2-how-to-use-google-maps-geolocation-video-tutorial/


================ SEGMENT  =====================
This is in your component:
export class SegmentPage {
   constructor() {     
     this.pet = "puppies";
 }
}

This is in your html:
<ion-segment [(ngModel)]="pet">
     <ion-segment-button value="puppies">
       Puppies
     </ion-segment-button>
     <ion-segment-button value="kittens">
       Kittens
     </ion-segment-button>
     <ion-segment-button value="ducklings">
       Ducklings
     </ion-segment-button>
</ion-segment>
------
https://gist.github.com/aarjithn/d282b019f6046f0de2f0ded623554313
https://stackoverflow.com/questions/45157896/ionic-horizontal-scroll-tab-for-categories
http://sinothomas.com/blog/index.php/2017/02/17/implementing-ionic-2-scrollable-tabs-directive/
https://www.joshmorony.com/creating-a-shrinking-header-for-segments-in-ionic/
https://demo.mobiscroll.com/angular/scrollview/cards#
> https://github.com/julienkermarec/ionic-infinite-swiped-tabs
http://192.168.1.105/vinay/CodeIgniterApi/myservice/segment?type=<category_type>

https://www.djamware.com/post/59b0ac0c80aca768e4d2b139/an-example-of-ionic-3-infinite-scroll-or-load-more

.swiper-slide {
overflow-y: scroll;
display: block;
}

ion-segment {
    display: block;
    white-space: nowrap;
    font-size: 0;
    overflow: auto;

    &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    ion-segment-button.segment-button {
        display: inline-block;
        min-width: 100px;
        width: auto;
    }
}
/*
ion-segment-button.segment-button {
    display: inline-block!important;
    min-width: 100px!important;
    width: auto!important;
    }*/




======================== IONIC GENERATE =============
$ ionic generate
$ ionic generate component
$ ionic generate directive
$ ionic generate page
$ ionic generate pipe
$ ionic generate provider
$ ionic generate tabs
$ ionic generate component foo
$ ionic generate page Login
$ ionic generate page Detail --no-module
$ ionic generate page About --constants
$ ionic generate pipe MyFilterPipe

=============== How to remove predefine menu back button ===============

<ion-navbar hideBackButton="true">

========================= how reload page ===============================

this.navCtrl.setRoot(this.navCtrl.getActive().component);

===================== How to work on selector ======================

++++++ page.ts (page you want to use anywhere)+++++++++
> copy selector: 'page' (load all page.html)

+++++ outputpage.html  ++++++

> make selector as a tag to load page
<page></page>

=======================================================================
********* ERRORS ***********************

> Cross-Origin Resource Sharing (CORS)  : check API URL/appropriatly parse query string
> undefined  : initialise undefined variable