Tips on incorporating asynchronous functionality in AngularJS

Question

Tips on incorporating asynchronous functionality in AngularJS

I am currently utilizing AngularJS version 1.5.8 and have a specific requirement. When the user clicks on the Next button, the text inside the button should change to 'Processing...' before completing the operation. I have implemented the $q service within my services to enable asynchronous functionality, but it seems to not be functioning correctly. Please review the code snippets below for more insight.

Service

mainApp.factory('PINVerificationServices', ['$http', '$rootScope','$q', function ($http, $rootScope) {
    return {
        IsPermitted: function (param) {
            return $q($http({
                url: '/Api/ApiPINVerification/IsPermitted/' + param,
                method: 'POST',
                async: true
            }));
        }
    };
}]);

Controller

mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) {
    $scope.SubmitText = "Next";

    $scope.Next = function () {
    $scope.SubmitText = "Processing...";
    PINVerificationServices.IsPermitted($scope.PIN).then(function (result) {
         $scope.SubmitText = "Next";
    });
  }
}

HTML

  <div class="list-group list-group-sm">
    <div class="list-group-item">
        <input class="form-control" ng-model="PIN" placeholder="PIN" required id="PIN" name="PIN" type="text" />
    </div>
  </div>
  <button type="submit" ng-click="Next()">{{SubmitText}}</button>

javascript angularjs

Answer 1

Answer №1

Give this a shot:

 try {
                fetch('/api/check-permission/' + id, {
                    method: 'POST'
                });
        } catch(error) {
            console.error('Error:', error);
        }

Answer 2

Give this a shot:

 try {
                fetch('/api/check-permission/' + id, {
                    method: 'POST'
                });
        } catch(error) {
            console.error('Error:', error);
        }

Answer 3

Answer №2

Here are the modifications needed based on your requirement for nested $http.

For the factory, utilize only $http without the use of $rootScope. The code should look like this:

    mainApp.factory('PINVerificationServices', ['$http', function ($http) {
        return {
               IsPermitted: function (param) {
                return $http({
                    url: '/Api/ApiPINVerification/IsPermitted/' + param,
                    method: 'POST'
                   });
                },

               GetStudentInformationByPIN : function () {
                return $http({
                    url: '/Api/ApiPINVerification/GetStudentInformationByPIN/', //your api url
                    method: 'GET'
                    });
               }
          };
    }]);

In the controller, implement $q.all():

       mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) {
       $scope.SubmitText = "Next";
       $scope.Next = function () {
            $scope.SubmitText = "Processing...";                      
            $q.all([PINVerificationServices.IsPermitted($scope.PIN),
            PINVerificationServices.GetStudentInformationByPIN($scope.PI‌N), 
             //other promises
            ]).then(function (result) {
                     if(result[0].data){
                         $scope.SubmitText = "Next";
                     }
                     if(result[1].data){
                         // studentdata response handling
                     }
                    });
            }
        }

Answer 4

Here are the modifications needed based on your requirement for nested $http.

For the factory, utilize only $http without the use of $rootScope. The code should look like this:

    mainApp.factory('PINVerificationServices', ['$http', function ($http) {
        return {
               IsPermitted: function (param) {
                return $http({
                    url: '/Api/ApiPINVerification/IsPermitted/' + param,
                    method: 'POST'
                   });
                },

               GetStudentInformationByPIN : function () {
                return $http({
                    url: '/Api/ApiPINVerification/GetStudentInformationByPIN/', //your api url
                    method: 'GET'
                    });
               }
          };
    }]);

In the controller, implement $q.all():

       mainApp.controller('PINVerificationController', function ($scope, $rootScope, $state, $window,$q, PINVerificationServices) {
       $scope.SubmitText = "Next";
       $scope.Next = function () {
            $scope.SubmitText = "Processing...";                      
            $q.all([PINVerificationServices.IsPermitted($scope.PIN),
            PINVerificationServices.GetStudentInformationByPIN($scope.PI‌N), 
             //other promises
            ]).then(function (result) {
                     if(result[0].data){
                         $scope.SubmitText = "Next";
                     }
                     if(result[1].data){
                         // studentdata response handling
                     }
                    });
            }
        }

Tips on incorporating asynchronous functionality in AngularJS

Answer №1

Answer №2

Similar questions

Problems encountered when trying to deploy on Firebase

creating curved lines in three.js

Learn the process of creating test cases using `ava` for the following code snippet

Using values from a designated line within the textarea to successfully submit a GET form

Access your Facebook account securely with Single Sign-On integration in Angular

Using NodeJS to facilitate communication between multiple NodeJS instances while also overseeing operations of a Minecraft server

What is the significance of -= and += operators in JavaScript programming language?

Ensure that clicking on various links will result in them opening in a new pop-up window consistently

Winston is set up to only record .info errors and does not save any errors to a file or a MongoDB database

Error retrieving data from the ngresource properties resource

Difficulty comprehending the response from an AJAX post is being experienced

Searching for data in a bootstrap table that is not case-sensitive

Express.js automatically sets timeouts for requests to static files

I'm having trouble posting ng-repeat Object data, I tried one method but it doesn't seem to be working

Unable to utilize jQuery's .append(data) function due to the need to use .val(append(data)) instead

What is the best way to determine when the context value has been established?

Modal obstructing BsDatePicker

The rows in the React table are refusing to change color despite the styles being applied; instead, they are coming back

JavaScript can sometimes present peculiar challenges when it comes to setting style attributes, especially when a DOCTYPE is

Is there a way to display a message box on initial page load only, using JavaScript or jQuery?