Exit from an ionic app by using hardware back-button

Exit from an ionic app by using hardware back-button:-

For exiting from an ionic app by pressing the hardware back-button, we do the following steps:-

1) Firstly disable the hardware back-button.

 2)Then on HardwareBackButton exit from app.

1) Disable hardware back-button:-

HardwareBackButtonManager Service for Ionic (Angular.js) provides an interface to easily disable the hardware back button on Android

.service( 'HardwareBackButtonManager', function($ionicPlatform){


this.deregister = undefined;


 


this.disable = function(){


this.deregister = $ionicPlatform.registerBackButtonAction(function(e){


e.preventDefault();


return false;


}, 101);


}




return this;


})


 


// usage


.controller( 'YourController', function( 'HardwareBackButtonManager' ){


HardwareBackButtonManager.disable();




})








//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

2) On HardwareBackButton exit from app:-

Put the following code accordingly to your angular.run configuration, and that's

it. 



.run(function($ionicPlatform, $ionicPopup) {
  $ionicPlatform.onHardwareBackButton(function () {
      if(true) { // your check here
          $ionicPopup.confirm({
            title: 'System warning',
            template: 'are you sure you want to exit?'
          }).then(function(res){
            if( res ){
              navigator.app.exitApp();
            }
          })
      }
  })
});

Resolve CORS issue in ionic

 What is CORS?

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the resource originated.

Dealing with CORS in Ionic

CORS is only an issue when we are running or testing our app when running ionic serve or ionic run -l.


We resolve this by using a proxy server. Let’s look how the Ionic CLI provides
an easily configurable proxy server.

The Ionic CLI proxy server

A quick definition about proxies:

In computer networks, a proxy server is a server that acts as an intermediary for requests from clients seeking resources from other servers.

What we did need to do to get around these CORS issues is have a proxy server that will take our requests, issue a new request to the API endpoint, receive the response, and forward it back to our app so we can get around CORS issues.

The Ionic CLI introduced the ability to have a proxy server issue requests for you to get around any CORS issues you may have.

Since the server is sending a fresh request to your destination, there will be no origin and therefore, no CORS needed. It is important to note that the browser adds in the Origin header.

 

Set up your ionic.project file to be something like:

Now you can add the following code in ionic.project  in your ionic project.

{
  "name": "demo",
  "app_id": "",
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://demo.api.com/api"
    }
  ]
}

Here in proxyUrl you will set your url where you want to hit.

Now in production_url you will set your localhost url, in service.js.

For example-

  production_url: 'http://localhost:8100/api'

Adding background image in ionic

 Adding background image in ionic :-

I have set a custom class .splash_screen_bg on a page in my Ionic app in order to style it with a custom background.

The CSS for the background is

Include the following css in your style.css 

.splash_screen_bg {
  background-image: url("../img/splash_screen.png");
  background-position: center;
  background-repeat: no-repeat;
}

Here in url you give the path of image, where you stored it.

Now where you want to apply the this image you can add the class splash_screen_bg

for example

 <ion-view view-title="Login" class="splash_screen_bg">

Then use the following command to run the application in ionic

ionic serve

Now you will find out the background image on desired page where you added it.

Read CSV file from Local File system

 Read CSV file from Local File system

 

You need a relative path.  The easiest way is to have the .csv
file in the same directory/folder as the main file and refer to
it simply by name.  Or you could have it in a sub-directory
named “sample” and refer to it as “sample/test.csv”

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8" />
   <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<h1 id="output">
</h1>
<script>
/*
THIS FILE: “index.html”
CONTENTS OF file “test.csv” saved in the same directory as this:
Name,Surname,Age
Joe,Smith,42
Alice,Jones,29
*/
var rows, f = "test.csv"
var parts = d3.csv(f, function(d) {
   return {
     Name: d.Name, Surname: d.Surname, Age: d.Age,
   };
}, function(error, rows) {
   d3.select("#output")
     .text(
       rows[0].Name + " " +
       rows[0].Surname + " " +
       "is " + rows[0].Age + " years old")
});
</script>
</html>

Web App by using angularjs,HTML and css

Download angular-phonecat

 By using clone

git clone --depth=14 https://github.com/angular/angular-phonecat.git

Change your current directory to angular-phonecat.

cd angular-phonecat

Install Node.js

 

  Check the version of Node.js that you have installed by running the following    command:

node --version

 The following dependencies also be install:-

apt-get install nodejs-legacy npm
nodejs --version
npm --version

Once you have Node.js installed on your machine you can download the tool dependencies by running:

npm install

 In angular-phonecat directory, run this command:

git checkout -f step-0

 This resets your workspace to step 0 of app.

To run the app, following command will be follow:-

npm start

and open the following link in your browser:-



http://localhost:8000/app/


 The HTML page that displays "Hello Word"


Your index.html look like:-

 app/index.html:

<!doctype html>
<html lang="en" ng-app>
<head>
  <meta charset="utf-8">
  <title>My Web App</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="bower_components/angular/angular.js"></script>
</head>
<body>

  <p>Hello Word</p>

</body>
</html>