Adding toastr alert message with restangular and angular ui-router

Question

I have been trying to find a better solution to show error messages when restangular fails to load data. Its simple to show an alert box, but I am using toastr throughout the site for messages. Injecting the toastr dependency to the app.config doesn't work.

What is the best way to show toastr alerts for badd http requests?

Here is my router:

configAppControllers.config(['$stateProvider', '$urlRouterProvider', 'RestangularProvider',
    function ($stateProvider, $urlRouterProvider, RestangularProvider) {

        RestangularProvider.setErrorInterceptor(function (response) {

            if (response.status == 401) {
                alert('Oops, looks like something went wrong here.\nPlease try your request again later.\n\nError Code: ' + response.status);
                //toastr.error('There has been an error contacting the server, please try again' + response.status);
            } else if (response.status == 400) {
                alert('Oops, looks like something went wrong here.\nPlease try your request again later.\n\nError Code: ' + response.status);
            } else {
                alert("Response received with HTTP error code: " + response.status );
            }
            return false;
        });

        // default route
        $urlRouterProvider.otherwise("/cas");
        $urlRouterProvider.when('/programhome/:programId', '/programhome/:programId/home');
        // ui router states for dashboard views
        //$urlRouterProvider.when('/');
        $stateProvider
            .state('cas', {
                url: "/cas",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerViewRight.html'
                    },
                    content: {
                        templateUrl: 'components/dashboard/intros/welcome.html'
                    }
                }
            })
            .state('app', {
                url: "/app/:casId",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerLogoViewRight.html'
                    },
                    content: {
                        templateUrl: 'components/dashboard/intros/application.html'

                    }
                }
            })
            .state('org', {
                url: "/org",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerLogoViewRight.html'
                    },
                    content: {
                        templateUrl: 'components/dashboard/intros/organizations.html'
                    }
                }
            })
            .state('programslist', {
                url: "/programs/:orgId",
                views: {
                    rightheader: {
                        templateUrl: 'components/headers/headerIconsOrgs.html',
                        controller: 'headerIconsOrgsController as headerOrgCtrl'
                    },
                    content: {
                        templateUrl: 'components/dashboard/programDetails/programs.html'
                    }
                }
            })

    }]).run(['$rootScope', '$timeout', '$location', '$state', 'toastr','$anchorScroll',
    function ($rootScope, $timeout, $location, $state, toastr, $anchorScroll) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
            console.log('event was:', toState);
        });
        $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams) {
            console.log('event was:', event);
        });
        $rootScope.$on('$stateChangeSuccess', function() {
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        });
        $timeout(function () {
            $('.sidebar').css({
                'height': $('.main-page').css('height')
            });
            $('.mv-sidebar').css({
                'height': $('.main-page').css('height')
            });
        }, 200);
    }]);

Create app.run block and inject your toaster dependency in it. Add your toaster code in app.run block instead of app.config — dhavalcengg
– dhavalcengg, Commented Dec 22, 2014 at 7:27
I don't think this is possible because you need the RestangularProvider dependancy and you can't inject thus in run function. I already tried that — jmccommas
– jmccommas, Commented Dec 22, 2014 at 12:36
You are right. We can't have RestangularProvider in run block. But we can have Restangular. And Restangular provides same methods which RestangularProvider provides. — dhavalcengg
– dhavalcengg, Commented Dec 22, 2014 at 13:14
No, this does not work, you cannot simply use Restangular as dependency in run block, then place your RestangularProvider.setErrorInterceptor function in the run function. I tried all this before I even posted this question to stack over flow. example: — jmccommas
– jmccommas, Commented Dec 22, 2014 at 14:39
No, what i am saying is Use your Restangular dependency to set setErrorInterceptor. Restangular.setErrorInterceptor is same as RestangularProvider.setErrorInterceptor. So in run block you have your restangular and you can use Restangular.setErrorInterceptor. — dhavalcengg
– dhavalcengg, Commented Dec 22, 2014 at 15:03

jmccommas · Accepted Answer · 2014-12-27 15:49:01Z

Solution is to add a run function to your router config function like this and it works perfect:

app.run(['$rootScope', '$timeout', '$location', '$state', 'toastr','$anchorScroll','Restangular',
    function ($rootScope, $timeout, $location, $state, toastr, $anchorScroll, Restangular) {

        Restangular.setErrorInterceptor(function (response) {

            if (response.status == 401) {
                toastr.error('Oops, looks like something went wrong here.<br>Please try your request again later.<br><br>Error Code: ' + response.status,'ERROR!!', {
                    allowHtml: true,
                    progressBar: true,
                    closeButton: true
                });

            } else if (response.status == 400) {
                toastr.error('Oops, looks like something went wrong here.<br>Please try your request again later.<br><br>Error Code: ' + response.status,'ERROR!!', {
                    allowHtml: true,
                    progressBar: true,
                    closeButton: true
                });

            } else {
                toastr.error("Response received with HTTP error code: " + response.status,'ERROR!!', {
                    allowHtml: true,
                    progressBar: true,
                    closeButton: true
                });

            }
            return false;
        });

    }]);

Collectives™ on Stack Overflow

Adding toastr alert message with restangular and angular ui-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related