ajoslin/angular-promise-tracker

Tracker for rootScope

artworkad opened this issue · 7 comments

artworkad commented

Hi,

This is in my base layout

<div ng-show="tracker.active()" class="global-loader">Loading...</div>

It should indicate that there is a request/background process in progress. I don't want to have many trackers like you describe it for your pizza tracker, but just one single tracker that shows loading for any kind of http request in my application.

My approach was to have

$rootScope.tracker = promiseTracker('tracker');

in my main controller. I tried to use it in a module like this

angular.module('AuthService', []).factory('Auth', function($http){

    var config = {
        headers: {
            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
            'X-Requested-With': 'XMLHttpRequest',
            'tracker' : 'tracker'
        }
    }

    return {
        login: function(user, success, error) {
            $http.post('/login', user, config).success(success).error(error);
        },
        logout: function(success, error) {
            $http.post('/logout').success(success).error(error);
        }
    };
});

However this does not work, no error and no loading message displayed. Any ideas how to use a tracker on root scope and in module?

ajoslin commented

Hi @artworkad,

You've almost got it working. The problem is you're putting the tracker as a header. It's expected to just be a field in the config.

Try this:

var config = {
  headers: {
    'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
    'X-Requested-With': 'XMLHttpRequest'
  },
  'tracker': 'tracker'
}

I would also recommend giving it a more unique ID, maybe something like promiseTracker('globalTracker').

artworkad commented

Ok now I have it like this

angular.module('AuthService', []).factory('Auth', function($http){

    var config = {
        headers: {
            'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8',
            'X-Requested-With': 'XMLHttpRequest'
        },
        tracker : 'globalTracker'
    }

    return {
        login: function(user, success, error) {
            $http.post('/login', user, config).success(success).error(error);
        },
        logout: function(success, error) {
            $http.post('/logout').success(success).error(error);
        }
    };
});

function LoginController($rootScope, $scope, $location, Auth, $cookieStore, promiseTracker) {

    $rootScope.tracker = promiseTracker('globalTracker');

    $scope.login = function() {

        var data = $.param({
            _username: $scope.username, 
            _password: $scope.password
        });

        Auth.login(data,
            function(res) {
               //success
            },
            function(err) {
                //error
            });
    };
}

and in layout not wrapped inside a controller but inside the ng-app:

<div ng-show="tracker.active()" class="global-loader">loading...</div>

The loading message still does not appear.

artworkad commented

@ajoslin ok got it, the last problem actually was related to my css. Thank you for support!)

ajoslin commented

Glad it works ✈️ 🐴 🔫 😄

airtonix commented

Apologies for bring this up again, but how is that example a global tracker that tracks everything? all it does is track http requests for the login and logout.

ajoslin commented

Hi @airtonix,

What is your use case?