Calling $http service request on page load of angularjs

Question

I have an Angular js application which loads from another application after hitting the link with URL which contains some query string parameters:

http://myDomain/clover/?merchant_id=65AY4FNRE9PSG&employee_id=Z1TZ0S0H758TG&client_id=9WJBRXSF1XM8P&code=c0ae98d6-d13c-2c4d-f601-d2ebd3d58ae9#/login

I want to do 2 things :

Enrollment Functionality: I have REST API for the Enrollment, But I need to send merchant_id , client_id and code which need to Fetch from above URL to the Enrollment API so that Enrollment can be done. And once Enrollment is successful then need to do following step i.e. login
Login to Application : I have REST API for Login also, and need to send employee_id an username and password.

Both these functionalities should happen in page load.

I have bootstraped my Angular app like :

angular.element(document).ready(function () {
   angular.bootstrap(document,['mPos']);
});

My Service code is :

mPosServices.factory('mosServiceFactory', function ($http, $rootScope, $cookies, $q) {
    return{

        loginService: function (userData) {
            var loginService = $http({
                method: 'get',
                data: {
                    'islogin': true
                },
                url: 'http://myServiceURL/oauth/token?grant_type=password&client_id=restapp&client_secret=restapp&username=' + userData.username + '&password=' + userData.password
            });
            return loginService;
        },

        enroll: function (signupdata) {
            var signup = $http({
                method: 'post',
                data: signupdata,
                url: 'http://myServiceURL/merchant/enrollment'
            });
            return signup;
        }

    };
});

How should I fetch those URL parameters ao page load ? how should I call $http request on page load so that Enrollment and login can be done?

score 0 · Answer 1 · answered Jul 20 '15 at 10:43

Your best bet is to use something like https://github.com/angular-ui/ui-router

You can configure the $on.'$stateChangeStart' event to run whatever you'd like before it begins to load a view, or use "resolve" which works somewhat similarly. You can also pull parameters out of the query string before loading a view like so (parameters s & d):

.state('pubrun', {
        url: '/pubrun?s&d',
        controller: 'pubCtrl',
        controllerAs: 'vm',
        templateUrl: 'views/partials/pub/pubrun.html',
    })

Which I then access in my controller on that view:

this.query.studyId = $stateParams.s;
this.query.distId = $stateParams.d;

No, Actually I don't want to do things on route Events. – user1608841 Jul 20 '15 at 15:38 — user1608841, Jul 20 '15 at 15:38

score 0 · Answer 2 · edited May 23 '17 at 11:58

you can do this using module.run(), like this:

mPosServices.run(function(mosServiceFactory) {

  mosServiceFactory.loginService({
    username: 'foo',
    password: 'bar'
  }).then(function(res) {
    // do something with res
  });

});

docs: https://docs.angularjs.org/api/ng/type/angular.Module#run

Update: for parsing URL, you use snippet for here https://stackoverflow.com/a/7826782/1438522

score 0 · Accepted Answer · answered Jul 31 '15 at 03:58

If you are loading your login view first, then in that loginController your can call your service,which will be called on page load once your login route gets initiated.

myCtrl.controller('loginController', ['$scope', '$rootScope', 'mosServiceFactory', '$location', '$cookies', '$modal', 'ngDialog', function ($scope, $rootScope, mosServiceFactory, $location, $cookies, $modal, ngDialog) {

//call your services here and it will be called once login view gets initiated.
            });
        };
   }]);

Calling $http service request on page load of angularjs

3 Answers3