angular $q.all and signalR promises

Question

I started to work with Angular two months ago so sorry in advance if my question is duplicate.

Although, I found similar question AngularJS Promises $q.all and SignalR I don't know how to fit that in my code.

I get data from the server by signalR and I want to show landing page as long as I don't get all the data from the server. I try to do that with $q.all but I got error. Bellow is my code and error that I get.

Here is my service:

var menuItemshub = new Hub(‘menuItemsHub’, {
    rootPath: $rootScope.defaultRootPath,
    //server side methods
    methods: [‘getMenuItems’],
    queryParams: {
        ‘token’: $rootScope.loggedInUser.accessToken,
    },
    //handle connection error
    errorHandler: function (error) {
        console.error(error);
    }
});

var countrieshub = new Hub(‘countriesHub’, {
    rootPath: $rootScope.defaultRootPath,
    //server side methods
    methods: [‘getCountries’],
    queryParams: {
        ‘token’: $rootScope.loggedInUser.accessToken,
    },
    //handle connection error
    errorHandler: function (error) {
        console.error(error);
    }
});

var menuItemshubInitDone = function () {
    return menuItemshub.promise.done();
};

var countrieshubInitDone = function () {
    return countrieshub.promise.done();
};

var getMenuItems = function () {
    return menuItemshub.getMenuItems();
};

var getCountries = function () {
    return countrieshub.getCountries();
};

Here is my controller

configurationService.menuItemshubInitDone().then(function () {
    configurationService.getMenuItems().then(function (response) {
        // Success
        $rootScope.menuItems = response.MenuItems;
    }, function (error) {
    });
});

configurationService.countrieshubInitDone().then(function () {
    configurationService.getCountries().then(function (response) {
        // Success
        $rootScope.countries = response.Countries;
        $rootScope.selectedAction = $rootScope.countries;
        $rootScope.setAction($rootScope.selectedAction[0]);

    }, function (error) {
    });
});

And I want to do something like:

var all = $q.all([configurationService.getCountries(), 
    configurationService.getMenuItems()]);

all.then(function () {
    $rootScope.showLandingPage = false;
});

I get following error SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started. I tried with

$q.when([configurationService.menuItemshubInitDone()]);

and then to call $q.all but i get the same error again.

I have been trying to find the solution for few days by googling but I couldn't figure out what I need to do.

Thank you for help in advance.

score 1 · Accepted Answer · answered Feb 14 '16 at 21:48

I have found what I was doing wrong. Here is code that works fine now, in case if somebody else get stuck as I was:

$scope.userConfigurations = function () {

        var all = $q.all([getMenuItems, getCountries]);
        all.then(function () {
            $rootScope.showLandingPage = false;
        });

        var getMenuItems = configurationService.menuItemshubInitDone().then(function () {
            configurationService.getMenuItems().then(function (response) {
                // Success
                $rootScope.menuItems = response.MenuItems;
            }, function (error) {
            });
        });

        var getCountries = configurationService.countrieshubInitDone().then(function () {
            configurationService.getCountries().then(function (response) {
                // Success
                $rootScope.countries = response.Countries;
                $rootScope.selectedAction = $rootScope.countries;
                $rootScope.setAction($rootScope.selectedAction[0]);

            }, function (error) {
            });
        });

angular $q.all and signalR promises

1 Answers1