How to retrieve data faster from angularJS get call

Question

I'm calling angularJS get call and parse the response and showing the response in UI, but I see a slight delay on the UI, is there a way that I can fix this:

Here is what my code is :

controller.js:


    function controller($scope, empDetails) {
        var empName;
        empDetails.getEmpDetails().then(function successCallback(response) {
            empName= response.data.name;
            if (empName) {
                $scope.name= empName;
            }
        });  

    angular.module('abc')
        .controller('controller', controller);
})();

service.js:

(function () {
    "use strict";
    var empDetails= function ($http) {
        var factory = {};
        factory.getEmpDetails = function () {
            return $http({
                method: 'GET',
                url: '/someurl'
            }).then(function (data) {
                return data;
            })
        }
        return factory;
    };
    empDetails.inject = ['$http'];
    angular.module('abc').service('empDetails', empDetails);
}())

thanks

Can use a resolve in router so data is there before template gets rendered. If it is a long delay take a look at how much data is being delivered and how much server time is taken to send the data — charlietfl, Jan 02 '18 at 07:48
It's a promise,, there will always be delay.. Use resolvers https://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx .. there is also a sloppy way to use ngif and hide your ui until you data is ready, but invest on resolvers. — itdoesntwork, Jan 02 '18 at 07:58
Yes in stateprovider resolve. but if it is a long delay should indicate something is happening to user so they don't keep clicking at link or whatever gets them to that view — charlietfl, Jan 02 '18 at 08:00
You may need to see this answers : https://stackoverflow.com/questions/9682092/how-does-data-binding-work-in-angularjs?rq=1 — Ramesh Rajendran, Jan 02 '18 at 09:13

score 0 · Answer 1 · answered Jan 02 '18 at 08:07

Obviously, it will take time to load data on the screen because you are calling an API.

But you can achieve this by,

Resolving your routes. //A resolve contains one or more promises that must resolve successfully before the route will change. This means you can wait for data to become available before showing a view.
Fetch only those fields which are necessary on front-end. //this will make the lightweight API.

Below are the links for using resolve in routeProvider/stateProvider:

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider https://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx

How to retrieve data faster from angularJS get call

1 Answers1