Before Jumping to the what is resolve, we have to know how single page application in Angular js divides the Applications into different routes.

 

Angular js Routing

Providers like $routrProvider or $stateProvider are helpful to define the routes in the Angular js. which provider is better is another topic to discuss so we will choose the $stateProvider to analyze how resolve is used.

 

let’s define a route called profile which will display the profile information of the user. The user can view the information he can edit if he wants to and other functionalities you would love to implement.

var cronjApp = angular.module('cronjApp', ['ui.router']);

cronjApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        /* Profile Route */
        .state('profile', {
             url: 'profile/:user_id',
             templateUrl: 'app/user/profile.html', //Template where you have written the view for the route
             controller: 'ProfileController'
        });

});

To display the user information to our view we need to call an API (network call) to get the user data stored in Database. Our task is to call the API as soon as the controller is loaded. correct? so let’s do it.

 

var cronjApp = angular.module('cronjApp');

cronjApp.controller('ProfileController'['$scope','$http','$stateParams',
function($scope, $http, $stateParams){
  //Get the user information
  var userPromise = $http.get('/api/user/get/' + $stateParams.user_id); 
   userPromise.then(function(response) { 
        $scope.user = response.data; }); 
   });
}]) 

Brilliant, We have received the user data and now we will bind that data to our view,

 

Name: <label> {{user.name}} </label>
Email: <label> {{user.name}} </label>
Mobile Number: <label> {{user.mobile_number}} </label>
Birth Date: <label> {{user.dob}} </label>

 

Above implementation will work, as we are doing it great right? But how does it work, we have to find out the flow. How angular js react when the route is requested by any user.

when the user request for,   www.cronj.com/profile/1

 

In this scenario Angular says,

Hey view just get downloaded, I have asked controller also to do the same. Controller will give you data in some time as soon as he gets it.

 

Angular js finds out what HTML view and controller that URL is demanding and it starts loading it into the browser. Great! profile.html and ProfileController are loaded into the browser. what is the task of profile.html? To display the user information. so does it have it?  The answer is NO. then who will bring it for him? definitely controller. okay, that’s fine but profile.html is disappointed and asked the question to Angular js.

why have you loaded me if you do not have data to display. What do I do till data comes.

Angular js says,

Show static data and show nothing where there is no data.

hmmm, Although this is quick, user can experience the time lag.

Solution,

Resolve is a solution to this scenario. Let’s see how we can use resolve in angular js.

 

var cronjApp = angular.module('cronjApp', ['ui.router']);

cronjApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        /* Profile Route */
        .state('profile', {
             url: 'profile/:user_id',
             templateUrl: 'app/user/profile.html', //Template where you have written the view for the route
             controller: 'ProfileController',
             resolve : {
                   user: function(){
                      return $http.get('/api/user/get/' + $stateParams.user_id);
                  }
             }
    })
});

 

What is the flow here?  Angular will not load controller and view until resolve is executed and made available. We can use it by dependency injection in the controller.

 

In this scenario, Angular says to view and controller,

Hey, All the things you wanted are there, just go to browser and get the job done.

 

Now, what do profile.html replies,

Brilliant, No complaints, I have all the inputs to rock the show.

 

Doesn’t it cool? It let the client side architecture to go smoothly. I have not minimised the time taken to load the data. I have not improved the client side solution but certainly, it has removed a lot of confusions.

 

CONCLUSION:  Resolve make sure your HTML is never in confusion to what to do and It enhances the user experience.

Looking for AngularJS Development Company, Hire our dedicated developers.!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.