How to implement angularjs async?

Question

I am using AngularJS v1.5.8, My requirement is when i click the Next button it'll display 'Processing...' inside button as text before complete the operation, i have included the $q with my services to get the asynchronous facility, but not working. please see my below codes.

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>

but not working - have you tried the simplest of debugging? like checking the developer tools console and network tabs? They provide a lot of information for real developers — Jaromanda X
– Jaromanda X, Commented May 24, 2017 at 11:50
I have checked @JaromandaX , its giving $q is not defined error. Thanks — sebu
– sebu, Commented May 24, 2017 at 11:52
i have included the $q with my services - right ... and did you include the q library in your page? — Jaromanda X
– Jaromanda X, Commented May 24, 2017 at 11:53
inject $q in factory, like : function ($http, $rootScope, $q) — anoop
– anoop, Commented May 24, 2017 at 11:53
$q isn't needed there at all, as $http already returns a promise.. Removing $q function wrapper should solve your problem — Pankaj Parkar
– Pankaj Parkar, Commented May 24, 2017 at 11:55

Sergaros · Accepted Answer · 2017-05-24 12:18:48Z

1

Try this:

 return $http({
                method: 'POST',
                url: '/Api/ApiPINVerification/IsPermitted/' + param
        });

answered May 24, 2017 at 12:18

Sergaros

8411 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

sebu Over a year ago

Not Working @Sergaros

Sergaros Over a year ago

can you show output of console.log(PINVerificationServices.IsPermitted($scope.PIN))

sebu Over a year ago

But another problem, not working with nested http service calling.

sebu Over a year ago

Suppose you have called IsPermitted($scope.PIN) function first, then again you have called another function PINVerificationServices.GetStudentInformationByPIN($scope.PIN) inside IsPermitted($scope.PIN) function.

DDelgro Over a year ago

Don't nest those calls. Just have the calls inside a function that passes a variable back and forth until you have verified the user.

anoop · Accepted Answer · 2017-05-24 13:09:03Z

Make below changes (from your requirement of nested $http).

In factory Use only $http, and no need of $rootScope as well, It should be like :

    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 controller make use of $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
                     }
                    });
            }
        }

Collectives™ on Stack Overflow

How to implement angularjs async?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related