Executing processes individually within AngularJS

Question

Executing processes individually within AngularJS

Just making sure I understand correctly, I have a simple web service resource query function set up like this

//Get country lists
$scope.getCountry = function(){
    $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    }).success(function(data) {
        $scope.countries = data;
    }).error(function(data) {
        console.log(data);
    });
};

//Get profile 
$scope.getProfile = function(profile_id, select){
     var formatJSON = {
            profile_id: profile_id,
            select: select,
        };
    var json = JSON.stringify(formatJSON);
    var urlsafe = exEncrypt(json);
    ProfileService.profileActions.query({payload:urlsafe}).$promise.then(function(datas){
        $scope.uProfile = datas[0];
        document.querySelector('title').innerHTML = $scope.uProfile.username;
    });  
};

//Initialize update sequence
$scope.initUpdate = function(profile_id, select){
    $scope.getCountry();
    $scope.getProfile(profile_id, select);
}

Essentially, when a user clicks the "Update" button, the

ng-click="initUpdate(param1, param2)"

function is triggered to load and display all necessary information. This function works well, but there is a problem. Due to getCountry() typically returning a larger file size [~3 - 3.5kb, load time ~260++ms server dependent] compared to getProfile() [~1 - 2kb, load time ~200++ms server dependent], the profile may be displayed before the country list is fully loaded, resulting in some empty fields on the UI page.

To address this issue, initially I tried applying a timeout to getProfile() like this

$scope.initUpdate = function(profile_id, select){
    $scope.getCountry();
    $timeout(function(){
        $scope.getProfile(profile_id, select);
    }, 200);
}

While this workaround worked temporarily, I found it challenging to determine the exact amount of delay needed as it depends on the server's loading time.

I am interested in exploring alternative approaches to ensure that

All necessary resources are fully loaded and COMPLETE (getCountry(), getInterest(), getABCDEFG(), and other similar functions...)
Only the getProfile() function is executed?

javascript angularjs

Answer 1

Answer №1

To achieve this, you can utilize promises by integrating $q from AngularJS (https://docs.angularjs.org/api/ng/service/$q) into your controller. By incorporating promises in getCountry() and initUpdate(), you can ensure that the program waits for the completion of the getCountry() request before proceeding. Additionally, if there are other requests to include, $q.all() can be used to wait for multiple requests to finish before displaying the profile.

$scope.initUpdate = function(profile_id, select){
    $scope.getCountry().then(
        function(){
            $scope.getProfile(profile_id, select);
        }
    );
}

$scope.getCountry = function(){
    var deferred = $q.defer();
    $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    }).success(function(data) {
        $scope.countries = data;
        deferred.resolve();
    }).error(function(data) {
        console.log(data);
        deferred.reject();
    });

    return deferred.promise;
};

(Note: It may be possible to enhance the code by directly returning the $http promise)

Answer 2

To achieve this, you can utilize promises by integrating $q from AngularJS (https://docs.angularjs.org/api/ng/service/$q) into your controller. By incorporating promises in getCountry() and initUpdate(), you can ensure that the program waits for the completion of the getCountry() request before proceeding. Additionally, if there are other requests to include, $q.all() can be used to wait for multiple requests to finish before displaying the profile.

$scope.initUpdate = function(profile_id, select){
    $scope.getCountry().then(
        function(){
            $scope.getProfile(profile_id, select);
        }
    );
}

$scope.getCountry = function(){
    var deferred = $q.defer();
    $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    }).success(function(data) {
        $scope.countries = data;
        deferred.resolve();
    }).error(function(data) {
        console.log(data);
        deferred.reject();
    });

    return deferred.promise;
};

(Note: It may be possible to enhance the code by directly returning the $http promise)

Answer 3

Answer №2

To prevent certain parts from appearing, consider implementing loaders.

Create a boolean variable to control when the loader should be displayed based on the status of the call.

If you need to load data before the view loads, check out ui-router and its resolve properties.

You can also return the $http call in your functions to handle it as needed (such as chaining them).

//Retrieve list of countries
$scope.getCountry = function(){
    return $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    });
};

//Retrieve profile data
$scope.getProfile = function(profile_id, select){
     var formatJSON = {
            profile_id: profile_id,
            select: select,
        };
    var json = JSON.stringify(formatJSON);
    var urlsafe = exEncrypt(json);
    return ProfileService.profileActions.query({payload:urlsafe}).$promise  
};

//Initialize update sequence
$scope.initUpdate = function(profile_id, select){
    $scope.getCountry().success(function(data) {
        $scope.countries = data;
        $scope.getProfile(profile_id, select).then(function(datas){
           $scope.uProfile = datas[0];
           document.querySelector('title').innerHTML = $scope.uProfile.username;
        });
    }).error(function(data) {
        console.log(data);
    });
}

This approach should work, but feel free to adapt it to suit your needs and preferences.

If you have any further questions (especially regarding ui-router), don't hesitate to ask.

EDIT :

Normally, $http calls are not placed in controllers but in services.

Below is an example of defining a state (from ui-router) with resolves :

$stateProvider
  .state('mystate', {
    url: "myroute"
    templateUrl: 'template.html',
    controller: "mystateController",
    resolve : {
        countries : function($http){
                           return $http({
                           method  : 'GET',
                           url     : cdnLinks('country'),
                        });
                    }
    }
  })

You can then inject the resolve parameter into your controller :

app.controller('mystateController', function(countries) {
  //Access the retrieved countries here.
  console.log(countries);
});

Answer 4

To prevent certain parts from appearing, consider implementing loaders.

Create a boolean variable to control when the loader should be displayed based on the status of the call.

If you need to load data before the view loads, check out ui-router and its resolve properties.

You can also return the $http call in your functions to handle it as needed (such as chaining them).

//Retrieve list of countries
$scope.getCountry = function(){
    return $http({
        method  : 'GET',
        url     : cdnLinks('country'),
    });
};

//Retrieve profile data
$scope.getProfile = function(profile_id, select){
     var formatJSON = {
            profile_id: profile_id,
            select: select,
        };
    var json = JSON.stringify(formatJSON);
    var urlsafe = exEncrypt(json);
    return ProfileService.profileActions.query({payload:urlsafe}).$promise  
};

//Initialize update sequence
$scope.initUpdate = function(profile_id, select){
    $scope.getCountry().success(function(data) {
        $scope.countries = data;
        $scope.getProfile(profile_id, select).then(function(datas){
           $scope.uProfile = datas[0];
           document.querySelector('title').innerHTML = $scope.uProfile.username;
        });
    }).error(function(data) {
        console.log(data);
    });
}

This approach should work, but feel free to adapt it to suit your needs and preferences.

If you have any further questions (especially regarding ui-router), don't hesitate to ask.

EDIT :

Normally, $http calls are not placed in controllers but in services.

Below is an example of defining a state (from ui-router) with resolves :

$stateProvider
  .state('mystate', {
    url: "myroute"
    templateUrl: 'template.html',
    controller: "mystateController",
    resolve : {
        countries : function($http){
                           return $http({
                           method  : 'GET',
                           url     : cdnLinks('country'),
                        });
                    }
    }
  })

You can then inject the resolve parameter into your controller :

app.controller('mystateController', function(countries) {
  //Access the retrieved countries here.
  console.log(countries);
});

Executing processes individually within AngularJS

Answer №1

Answer №2

Similar questions

.Certain IDs on a website may not respond to clicks due to various reasons

JavaScript: Creating keys for objects dynamically

JavaScript variable not refreshing its value after submitting an HTML form

Troubleshooting the issue of JavaScript not executing on elements with a specific CSS class

Is there a way for me to automatically go back to the home page when I press the back button on the browser?

What is the best way to arrange this object alphabetically by name using Angular?

Error code 403 is returned when attempting to send an ajax Post request, indicating

When utilizing the header slot in v-data-table, an empty header row is unexpectedly appearing

What criteria does Angular use to determine when the aot compiler should be utilized?

"Utilizing the splice method to insert an element at specified indexes within an

Sending data from jQuery to an AngularJS function is a common task that can be accomplished in

"Emphasize menu items with an underline as you navigate through the

JavaScript string: Use regex to find and replace with position index

Alternative method for handling web requests in case JavaScript is not enabled

Tips for swapping out a page for a component

Encountering an undefined json array when making an AJAX request

Visual Studio Code unable to locate source maps for typescript debugging

Having issues with passing POST data during file handling operations

Adding the tasksMap to the dependency array in the React useEffect hook will result in an endless loop

AngularJS - Showing only items belonging to the same team