menu

Callback in javascript

date_range 18/07/2015 00:00

A callback function is a function that is passed to another function as parameter and the callback function is called (or executed) inside another function.
 e.g :-
 var func1 = function(args ,callback){
 }    
When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function in the parameter. In other words, we aren’t passing the function with the trailing pair of executing parenthesis () like we do when we are executing a function.

How to make sure that Callback is a function before executing it??
It is always wise to check that the callback function passed in the parameter is indeed a function before calling it. Also, it is good practice to make the callback function optional.
Let's refactor the above code as follow :-
 var func1 = function(args ,callback){
 .......
 if (typeof callback == "function") {
       callback();
     } else {
       console.log("No callback defined");
     }
 }

How to call a callback function??
Now we have to use this callback function after executing func1 function. So define callback inside func1. Normally we call a function using just its name and pass arguments inside it but in this case we define function as second argument.
e.g :-
 func1(args ,function(){
  console.log("Call back will executed after fun1 returns the result");
 });  

Source :- http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/#

Adding social login in ionic using Firebase

date_range 18/07/2015 00:00

Steps to add social login button for github in ionic
  1. Create a new application in github from here.
  2. Once the GitHub app is created, we’ll take a client ID and a client secret and paste them into the GitHub authentication section in our Firebase app dashboard.
  3. Create a new app in ionic
  4.  $ ionic start myApp blank
     $ cd myApp
     $ ionic plugin add cordova-plugin-inappbrowser
     $ ionic add angularfire
    
  5.  Add the following files in ionic
  6.  <script src="lib/firebase/firebase.js"></script>
     <script src="lib/angularfire/dist/angularfire.min.js"></script>
    
  7. Inject Firebase as a dependency of your app as follow in app.js
  8.  angular.module('starter', ['ionic', 'firebase'])
    
  9. Inside contoller add the following function
  10.   $scope.loginGithub = function(authMethod) {
         var ref = new Firebase("https://gurinder.firebaseio.com");
         ref.authWithOAuthPopup("github", function(error, authDataGithub) {
           if (error) {
             console.log("Login Failed!", error);
           } else {
             $scope.authDataGithub = authDataGithub;
             console.log("Authenticated successfully with payload:", authDataGithub);
           }
         });
       };
    
  11. Call this function on button click inside HTML file
  12.  <ion-pane ng-controller="AppCtrl">
      <ion-content>
       <button class="button button-royal icon ion-social-github" ng-click="loginGithub()"></button>
      </ion-content>
     </ion-pane>
    
We need just few changes to Login using other social sites like facebook, twiiter etc. Refer to this link to do that.  

How to use http interceptor to handle http request and response in ionic

date_range 11/07/2015 00:00

The $http service is a core Angular service that facilitates communication with the remote HTTP servers.
In general we use it in our controller or service as follow :-

 // Simple GET request example :
 $http.get('/someUrl').
  success(function(data, status, headers, config) {
   // this callback will be called asynchronously
   // when the response is available
  }).
  error(function(data, status, headers, config) {
   // called asynchronously if an error occurs
   // or server returns response with an error status.
  });

How to create a blank app using IONIC framework

date_range 04/07/2015 00:00

After installing and setup ionic use the following command to build your first project.

ionic start AppName blank
There are three ready-made app templates to start a fresh app.
  1. blank Creating a blank App.
  2. tabs creating a template having Tabs.
  3. sidemenu creating a template having sidemenu.