Tuesday, August 27, 2019

Get Post Delete Pur

1. Ionic get post delete put commads


import { Component, OnInit } from '@angular/core';

import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

url = 'https://localhost:44354/api/employees_';

constructor(private http:HttpClient) { }

ngOnInit() {
// this.getApi();
}

getApi(){
let Headers_ = new HttpHeaders({
'Content-Type': 'application/json'
});
this.http.get(this.url,{headers:Headers_,params:{'Emp_Name':'ri'}})
.subscribe(data => {
console.log('data : '+JSON.stringify(data));

});
}

postApi(){
let Headers_ = new HttpHeaders({
'Content-Type': 'application/json'
});

let jsonData={
"Emp_Name": "Rinkesh Gola",
"Address": "Agra",
"Mobile": "7878"
}
this.http.post(this.url,jsonData,{headers:Headers_})
.subscribe(data => {
console.log('data : '+JSON.stringify(data));

});
}

putApi(){
let Headers_ = new HttpHeaders({
'Content-Type': 'application/json'
});

let jsonData={
"Srno":"51",
"Emp_Name": "Sanjay Gola",
"Address": "Agra",
"Mobile": "99"
}

this.http.put(this.url,jsonData,{headers:Headers_,params:{"id":"51"}})
.subscribe(data => {
console.log('data put : '+JSON.stringify(data));

});
}

deleteApi(){
let Headers_ = new HttpHeaders({
'Content-Type': 'application/json'
});

let jsonData={
"Srno":"50",
"Emp_Name": "Sanjay Gola",
"Address": "Agra",
"Mobile": "99"
}

this.http.delete(this.url,{headers:Headers_,params:{"id":"51"}})
.subscribe(data => {
console.log('data put : '+JSON.stringify(data));

});
}

}



2. Ionic version

PS E:\E Drive\RND\IONIC\myIoAppApiGetPostDelPut> ionic info Ionic: Ionic CLI : 5.2.3 (C:\Users\OMG\AppData\Roaming\npm\node_modules\ionic) Ionic Framework : @ionic/angular 4.7.4 @angular-devkit/build-angular : 0.801.3 @angular-devkit/schematics : 8.1.3 @angular/cli : 8.1.3 @ionic/angular-toolkit : 2.0.0 Utility: cordova-res : not installed native-run : 0.2.8 System: NodeJS : v10.16.0 (C:\Program Files\nodejs\node.exe) npm : 6.9.0 OS : Windows 10

Monday, August 19, 2019

Post in ionic 4 or 5 with api with fromUri

1. Post in ionic 4 or 5 with api with fromUri




Code is ...


import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
selector: 'app-create2',
templateUrl: './create2.page.html',
styleUrls: ['./create2.page.scss'],
})
export class Create2Page implements OnInit {

result: any= [];
data: Observable<any>;

constructor(private http: HttpClient) { }

ngOnInit() { }

getData(){
var url = "https://localhost:44354/api/employees_";
// alert("Get data");
this.data = this.http.get(url);
this.data.subscribe(data => {
this.result = data;
console.log(data);
})
}
postData(){
var url = "https://localhost:44354/api/employees_";
var durl="?Emp_Name=RinkeshGola&Address=Agra&Mobile=87878";
this.data = this.http.post(url+encodeURI(durl),"");
this.data.subscribe(data => {
console.log("show data : "+JSON.stringify(data));
})
}
}


Monday, August 12, 2019

Get in ionic 3 or 4 or later or test api get in ionic


import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
selector: 'app-home',
templateUrl: './home.page.html',
styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

constructor(private http: HttpClient) { }

ngOnInit() {
this.load_data();
}

load_data(){
this.http.get<any[]>('http://local.omgrk.com/api/employees_').subscribe(d => console.log(d));
}

}

Thursday, August 8, 2019

Install ionic lab

1. Install ionic lab
    E:\E Drive\RND\IONIC\myIoAppApiGet> npm i @ionic/lab

2. Run ionic lab
    E:\E Drive\RND\IONIC\myIoAppApiGet> ionic lab
(it will run ionic lab and ionic serve)

Wednesday, August 7, 2019

Ionic 4

1. Install ionic
    C:\Users\OMG>npm install -g ionic
2. Install cordova
    C:\Users\OMG>npm install -g cordova

3. You can install both ionic and  cordova togather
    C:\Users\OMG>npm install -g cordova ionic

4. Check version of ionic
     C:\Users\OMG>ionic info
     C:\Users\OMG>ionic -v

5. Generate new ionic 4 project
     C:\Users\OMG\Desktop\myIoApp>ionic start myIoApp blank --type=angular

6. Genrate new page this is include with complete module of package html file, ts files
    C:\Users\OMG\Desktop\myIoApp> ionic g page detail

   Genrate new page under folder this is include with complete module of package html file, ts files
   ..App> ionic g page folderName/detail

7. Open or Debug or Compile
   > ionic serve

8. Ionic serve with cordova
>ionic serve --cordova --platform browser

9. Ionic lab or Android test in Ionic
>npm i @ionic/lab

Navigation in ionic or redirect in ionic

1.  Redirect as return View in mvc code in .ts       this .router.navigateByUrl( "/rec-view/" +d.Srno,{ skipLocationChange:tru e...