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>

 

 

Pull to refresh

The idea is to load in new items to the top of a feed by pulling down from the top of the list until you see a loading indicator, letting go, and watching as new items magically (not really) add themselves in.

 Ionic has an awesome directive that has undergone a redo fairly recently to accomplish exactly this.

ionRefresher (Pull to Refresh Directive)

The Ionic directive we are going to use is the ion-refresher

 The most basic usage is as follows:

<ion-refresher on-refresh="doRefresh()"></ion-refresher>

 on-refresh should point to a $scope function that gets the new data, updates a list, and then lets the refresher know it is done. This refresher should be above some kind of list.


 Example

<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<ion-list>
  <ion-item class="item-avatar" ng-repeat="item in items">
    <img src="{{item.user.picture.thumbnail}} " />
    ## {{item.user.name.first}} {{item.user.name.last}}
    <p>{{item.user.location.city}} {{item.user.password}}</p>
  </ion-item>
</ion-list>

 

Factory

In our example, we’re going to be making a call to the Random User API to get some data to play with. To do this, we’ll create a factory that makes these API calls. This factory will have two methods: GetFeed and GetNewUser. GetFeed will be called when our app loads to get the initial data, and the GetNewUser will be called each time we do a pull to refresh.

.factory('PersonService', function($http){
  var BASE_URL = "http://api.randomuser.me/";
  var items = [];

  return {
    GetFeed: function(){
      return $http.get(BASE_URL+'?results=10').then(function(response){
        items = response.data.results;
        return items;
      });
    },
    GetNewUser: function(){
      return $http.get(BASE_URL).then(function(response){
        items = response.data.results;
        return items;
      });
    }
  }
})

Controller

Our controller needs to do 2 things:

1. Fill the feed with the initial items
2. Handle the pull to refresh

First, to fill our feed, we’ll want to make a call to the PersonService and assign the result to the $scope.items array.
Next, we need to handle the pull to refresh. Recall we configured our directive to call a doRefresh function.
In this function, we should call the GetNewUser function and add these items to the beginning of the array.

.controller('MyCtrl', function($scope, $timeout, PersonService) {
  $scope.items = [];

  PersonService.GetFeed().then(function(items){
    $scope.items = items;
  });

  $scope.doRefresh = function() {
    PersonService.GetNewUser().then(function(items){
      $scope.items = items.concat($scope.items);

      //Stop the ion-refresher from spinning
      $scope.$broadcast('scroll.refreshComplete');
    });
  };

});

 

To resolve EACESS issue, when installing yo

Install an AngularJS generator

You can install Yeoman generators using the npm command.

Install prerequisites

Before installing Yeoman, you will need the following:

• Node.js v0.10.x+
• npm (which comes bundled with Node) v2.1.0+
• git

You can check if you have Node and npm installed by typing:

 node --version && npm--version

You can check if you have Git installed by typing:

• git --version

Install the Yeoman toolset

Once you’ve got Node installed, install the Yeoman toolset:

• npm install --global yo bower grunt-cli

 Errors?

If you see permission or access errors, such as  EACCESS, do not use sudo as a work-around.Then

• sudo chown -R $USER:$GROUP ~/.npm
• npm cache clean  

then install yo

•  npm install --global yo bower grunt-cli 

Confirm installation

• yo --version && bower --version && grunt --version

Install an AngularJS generator

• npm install --global generator-angular@0.11.1