rahuljograna-blog

[rahuljograna-blog]

Part 20 consuming rest api in ionic

in this video, I will show you that how you can consume the rest API.

in the previous video we have implemented the asp.net web API project so here we will retrieve that data.

1. Create the New Ionic 3 App

As usual, we are creating new Ionic 3 app from scratch. Open the terminal or Node command line then type this command

ionic start ionic3Example blank

now navigate to our project

cd ionic3Example

2. Install and Configure the New Angular 4.3 HttpClient

By default in the last version of Ionic 3 (when this tutorial created) it still using old Angular HTTP module. For this, we have to install a different module for the new Angular 4.3 HTTPClient. Angular use different module name for HTTP, so the developer can migrate to the new Angular 4.3 HTTPClient slowly because old HTTP module still can be used. For safe use with Ionic 3, update all '@angular' dependencies with the latest version.

npm install @angular/common@latest --save npm install @angular/compiler@latest --save npm install @angular/compiler-cli@latest --save npm install @angular/core@latest --save npm install @angular/forms@latest --save npm install @angular/http@latest --save npm install @angular/platform-browser@latest --save npm install @angular/platform-browser-dynamic@latest --save

Next, open and edit 'src/app/app.module.ts' then add this import.

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

Then register it to '@NgModule' imports after 'BrowserModule', so it will look like this.

imports: [  BrowserModule,  HttpClientModule,  IonicModule.forRoot(MyApp) ],

3. Create Ionic 3 Service or Provider

This time we will implement the new Angular 4.3 HTTPClient on the Ionic 3 service or provider. Create the service or provider file by type this command.

ionic g provider Rest

It will create 'rest.ts' file and 'rest' folder inside 'providers' folder and also register it on 'app.module.ts'. Now, open and edit 'providers/rest/rest.ts' then replace 'http' import by new Angular 4.3 HTTPClient.

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

Also, replace 'Http' injection in the constructor.

constructor(public http: HttpClient) {  console.log('Hello RestServiceProvider Provider'); }

Next, we will create all REST API call inside 'rest.ts' file. Add this line before the constructor.

apiUrl = 'your url here';

Add this functions after constructors.

getStudents() {  return new Promise(resolve => {    this.http.get(this.apiUrl+'/students').subscribe(data => {      resolve(data);    }, err => {      console.log(err);    });  }); }

4. Display Data in View

To displaying data in the view, open and edit `src/pages/home/home.ts` then add this import

import { RestProvider } from '../../providers/rest/rest';

Inject the `RestProvider` to the constructor.

constructor(public navCtrl: NavController, public restProvider: RestProvider) {}

Add variable for holds users data before the constructor.  students : any;

Create a function below the constructor for calling the users from the provider then fill users variable.

getStudents() {    this.restProvider.getStudents()    .then(data => {      this.students = data;      console.log(this.students);    });  }

Now, call that function inside the constructor.

constructor(public navCtrl: NavController, public restProvider: RestProvider) {      this.getStudents();  } Then, open and edit 'src/pages/home/home.html' then replace '<ion-content>' and it's content using this.

   <ion-list inset>      <ion-item *ngFor="let student of students">        <h1> {{student.id}}</h1>        <h2>{{student.name}}</h2>        <p>{{student.dept}}</p>        <p>{{student.gender}} </p>      </ion-item>    </ion-list>

Run the Application . ==================================================== to download full source code and presentation visit our wesite and Blog website : - http://dotnetlab.in/ source code : - https://github.com/rahuljograna facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/ visit my blog : - http://aspnetinhindi.blogspot.in follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 19 creating asp.net web api service for ionic

in this video and my upcoming video, i will show you real-time use of the ionic application. so in this video, i will show you that how to create asp.net web API and use this in you ionic application

to learn asp.net web API visit my youtube playlist

https://www.youtube.com/watch?v=kwJqT53VvDw&list=PLI2mio_WEbYscvLd1tG0wsmZlMgwhaEOF

for creating asp.net web API you have visual studio required you can download visual studio from here https://www.visualstudio.com

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

namespace studentService.Controllers

{

   public class studentsController : ApiController

   {

       // GET api/<controller>

       public IEnumerable<student> Get()

       {

           using(studentDBEntities enti = new studentDBEntities())

           {

               return enti.students.ToList();

           }

       }

       // GET api/<controller>/5

       public string Get(int id)

       {

           return "value";

       }

       // POST api/<controller>

       public void Post([FromBody]string value)

       {

       }

       // PUT api/<controller>/5

       public void Put(int id, [FromBody]string value)

       {

       }

       // DELETE api/<controller>/5

       public void Delete(int id)

       {

       }

   }

}

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 18 pushing page in ionic

in this video, I will show you that how you can push the page, or navigate from one page to another page using push component of navController,

Directive to declaratively push a new page to the current nav stack.

navPush is navigation component in ionic where user can navigate one page to other page.

Navigation is how users move between different pages in your app. Ionic’s navigation follows standard native navigation concepts, like those in iOS. In order to enable native-like navigation, we’ve built a few new navigation components that might feel different for developers used to traditional desktop browser navigation.

First generate new page

To generate page we will use command ionic g page pagename

After that register it to the app.module.ts file.

first import the page where to navigate

import {Pages} from '../pages/pages';

then inside contractor write this code.

this.navCtrl.push(Pages);

Command Description

build Build web assets and prepare your app for any platform targets

docs Open the Ionic documentation website

generate Generate pipes, components, pages, directives, providers, and tabs (ionic-angular = 3.0.0)

info Print system/environment info

link Connect your local app to Ionic

login Login with your Ionic ID

serve Start a local dev server for app dev/testing

signup Create an Ionic account

start Create a new project

telemetry (deprecated) Opt in and out of telemetry

upload (deprecated) Upload a new snapshot of your app

config get Print config values

config set Set config values

cordova build Build (prepare + compile) an Ionic project for a given platform

cordova compile Compile native platform code

cordova emulate Emulate an Ionic project on a simulator or emulator

cordova platform Manage Cordova platform targets

cordova plugin Manage Cordova plugins

cordova prepare Copies assets to Cordova platforms, preparing them for native builds

cordova requirements Checks and print out all the requirements for platforms

cordova resources Automatically create icon and splash screen resources

cordova run Run an Ionic project on a connected device

doctor check Check the health of your Ionic project

doctor ignore Ignore a particular issue

doctor list List all issue identifiers

git remote Adds/updates the Ionic git remote to your local Ionic app repository

integrations disable Disable an integration

integrations enable Add various integrations to your app

monitoring syncmaps Sync Source Maps to Ionic Pro Error Monitoring service

package build (deprecated) Start a package build

package download (deprecated) Download your packaged app

package info (deprecated) Get info about a build

package list (deprecated) List your cloud builds

ssh add Add an SSH public key to Ionic

ssh delete Delete an SSH public key from Ionic

ssh generate Generates a private and public SSH key pair

ssh list List your SSH public keys on Ionic

ssh setup Setup your Ionic SSH keys automatically

ssh use Set your active Ionic SSH key

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 17 creating sliders in ionic

in this video, I will show you that how you can create a welcome slider in your ionic application.

Slides make it easy to create galleries, tutorials, and page-based layouts. Slides take a number of configuration options on the ion-slides component.

to create simple slider use this code.

<ion-slides pager>

 <ion-slide style="background-color: green">

   <h2>Slide 1</h2>

 </ion-slide>

 <ion-slide style="background-color: blue">

   <h2>Slide 2</h2>

 </ion-slide>

 <ion-slide style="background-color: red">

   <h2>Slide 3</h2>

 </ion-slide>

</ion-slides>

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 16 display toast messages in ionic

in this video, I will show you that how you can display simple toast message in your ionic application. Toast is a subtle notification that appears on top of an app’s content. Typically, Toasts are displayed for a short duration of time then automatically dismiss. to create toast message first import this library import { ToastController } from 'ionic-angular'; then create an instace of this ToastController export class MyPage {  constructor(public toastCtrl: ToastController) {  } after it create a method to display a toast message  presentToast() {    let toast = this.toastCtrl.create({      message: 'User was added successfully',      duration: 3000, // 3 secs       position : top// middle    });    toast.present();  } } then call this method in button <button ion-button (click)="presentToast()">click me</button> ==================================================== to download full source code and presentation visit our wesite and Blog website : - http://dotnetlab.in/ source code : - https://github.com/rahuljograna facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/ visit my blog : - http://aspnetinhindi.blogspot.in follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 15 how to use loading in ionic

in this video, I will show you that how you can create loading component in your ionic application.

The Loading component is an overlay that prevents user interaction while indicating activity. By default, it shows a spinner based on the mode. Dynamic content can be passed and displayed with the spinner. The spinner can be hidden or customized to use several predefined options. The loading indicator is presented on top of other content even during navigation.

to create loading component first import this.

import { LoadingController } from 'ionic-angular';

then create an instance of this LoadingController

export class MyPage {

 constructor(public loadingCtrl: LoadingController) {

 }

then create a method

 presentLoading() {

   let loader = this.loadingCtrl.create({

     content: "Please wait...",

     duration: 3000

   });

   loader.present();

 }

}

now call this method inside the button

<button ion-button (click)="presentLoading()">click me </button>

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 14 how to use actionsheet controller in ionic

in this video, i will show you that how you can create actionSheet UI components in your ionic application.

Action Sheets slide up from the bottom edge of the device screen, and display a set of options with the ability to confirm or cancel an action. Action Sheets can sometimes be used as an alternative to menus, however, they should not be used for navigation.

The Action Sheet always appears above any other components on the page, and must be dismissed in order to interact with the underlying content. When it is triggered, the rest of the page darkens to give more focus to the Action Sheet options.

to create action sheet

import this library

import { ActionSheetController } from 'ionic-angular';

in constructor create instance

constructor(public actionSheetCtrl: ActionSheetController) { }

then create a method  after constructor

presentActionSheet() { let actionSheet = this.actionSheetCtrl.create({ title: 'Modify your album', buttons: [ { text: 'Destructive', role: 'destructive', handler: () => { console.log('Destructive clicked'); } },{ text: 'Archive', handler: () => { console.log('Archive clicked'); } },{ text: 'Cancel', role: 'cancel', handler: () => { console.log('Cancel clicked'); } } ] }); actionSheet.present(); } }

then create button to call this method

<button ion-button (click)="presentActionSheet">click me</button>

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 13 how to use segments in ionic

in this video, i will show you that how you can create whatsApp like theme using ionic segments UI components. The segment is a collection of buttons that are displayed in a line. They can act as a filter, showing/hiding elements based on the value of the segment

<div padding>  <ion-segment [(ngModel)]="pet">    <ion-segment-button value="kittens">      Kittens    </ion-segment-button>    <ion-segment-button value="puppies">      Puppies    </ion-segment-button>  </ion-segment> </div> <div [ngSwitch]="pet">  <ion-list *ngSwitchCase="'puppies'">    <ion-item>      <ion-thumbnail item-start>        <img src="source../">      </ion-thumbnail>      <h2>Ruby</h2>    </ion-item>    ...  </ion-list>  <ion-list *ngSwitchCase="'kittens'">    <ion-item>      <ion-thumbnail item-start>        <img src="source../">      </ion-thumbnail>      <h2>Luna</h2>    </ion-item>   </ion-list> </div>

==================================================== to download full source code and presentation visit our wesite and Blog website : - http://dotnetlab.in/ source code : - https://github.com/rahuljograna facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/ visit my blog : - http://aspnetinhindi.blogspot.in follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 12 how to use alerts in ionic

in this video, i will show you that how you can use alerts in you ionic application.

Alerts are a great way to offer the user the ability to choose a specific action or list of actions. They also can provide the user with important information, or require them to make a decision (or multiple decisions).

From a UI perspective, Alerts can be thought of as a type of “floating” modal that covers only a portion of the screen. This means Alerts should only be used for quick actions like password verification, small app notifications, or quick options. More in-depth user flows should be reserved for full-screen Modals.

step 1 first import this in your page:

import { AlertController } from 'ionic-angular';

step 2  inside class constructor create instance

export class MyPage {  constructor(public alertCtrl: AlertController) {  }

step 3 create method and call inside button  showAlert() {    let alert = this.alertCtrl.create({      title: 'dotnetlab!',      subTitle: 'notification from dotnetlab',      buttons: ['OK']    });    alert.present();  } }

step 4 call inside button

<button ion-button (click)="showAlert()">click me</button>

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 11 inputs in ionic hindi

in this video i will show you inputs elements in ionic application.

Inputs are essential for collecting and handling user input in a secure way. They should follow styling and interaction guidelines for each platform, so that they are intuitive for users to interact with. Ionic uses Angular 2’s form library, which can be thought of as two dependent pieces, Controls, and Control Groups.

Each input field in a form has a Control, a function that binds to the value in the field, and performs validation. A Control Group is a collection of Controls. Control Groups handle form submission, and provide a high-level API that can be used to determine whether the entire form is valid.

Fixed Inline Labels

Floating Labels

Inline Labels

Inset Labels

Placeholder Labels

Stacked Labels

Fixed Inline Labels.

<ion-list>  <ion-item>    <ion-label fixed>Username</ion-label>    <ion-input type="text" value=""></ion-input>  </ion-item>  <ion-item>    <ion-label fixed>Password</ion-label>    <ion-input type="password"></ion-input>  </ion-item> </ion-list>

====================================================

to download full source code and presentation visit our wesite and Blog

website : - http://dotnetlab.in/

source code : - https://github.com/rahuljograna

facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/

visit my blog : - http://aspnetinhindi.blogspot.in

follow me on twitter : https://twitter.com/THEJOGRANA

[rahuljograna-blog]

Part 9 radio button in ionic

Like the checkbox, a radio is an input component that holds a boolean value. Under the hood, radios are no different than HTML radio inputs. However, like other Ionic components, radios are styled differently on each platform. Unlike checkboxes, radio components form a group, where only one radio can be selected at a time. Use the checked attribute to set the default value, and the disabled attribute to disable the user from changing to that value. <ion-list radio-group>  <ion-list-header>    Select Gender  </ion-list-header>  <ion-item>    <ion-label>Male</ion-label>    <ion-radio checked="true" value="male"></ion-radio>  </ion-item>  <ion-item>    <ion-label>Female</ion-label>    <ion-radio value="female"></ion-radio>  </ion-item> </ion-list>

[rahuljograna-blog]

in this video, I will show you that how you can use checkbox component in your ionic application. A checkbox is an input component that holds a boolean value. Checkboxes are no different than HTML checkbox inputs. However, like other Ionic components, checkboxes are styled differently on each platform. Use the checked attribute to set the default value, and the disabled attribute to disable the user from changing the value. <ion-item>  <ion-label>Cricket</ion-label>  <ion-checkbox color="dark" checked="true"></ion-checkbox> </ion-item> <ion-item>  <ion-label>Football</ion-label>  <ion-checkbox disabled="true"></ion-checkbox> </ion-item> ==================================================== to download full source code and presentation visit our wesite and Blog website : - http://dotnetlab.in/ facebook page :- https://www.facebook.com/DotnetLab-1896440207343189/ visit my blog : - http://aspnetinhindi.blogspot.in follow me on twitter : https://twitter.com/THEJOGRANA Part 8 checkbox component in ionic

[rahuljograna-blog]

ionic cards example