(Angular-ui-router) Show loading animation during resolve process

Question

This is a two part question:

1. I am using the resolve property inside $stateProvider.state() to grab certain server data before loading the controller. How wo

Answer 1

This is loader for globally when page navigate between any state (any page), put in app.js

.run(
    ['$rootScope',
        function($rootScope) {
            $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = true;
            })
            $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
                $rootScope.preloader = false;
            })
        }
    ])

In html:

<div ng-show="preloader">Loading...</div>

Answer 2

My Idea to use view while using resole in router it is working awesome. try this.

//edit index.html file 
<ion-nav-view>
    <div ng-show="loadder" class="loddingSvg">
        <div class="svgImage"></div>
    </div>
</ion-nav-view>

// css file

.loddingSvg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    z-index: 99;
    left: 0;
    right: 0;
}

.svgImage {
    background: url(../img/default.svg) no-repeat;
    position: relative;
    z-index: 99;
    height: 65px;
    width: 65px;
    background-size: 56px;
    top: 50%;
    margin: 0 auto;
}

// edit app.js

 .run(function($ionicPush, $rootScope, $ionicPlatform) {




        $rootScope.$on('$stateChangeStart',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = true;
            });

        $rootScope.$on('$stateChangeSuccess',
            function(event, toState, toParams, fromState, fromParams) {
                $rootScope.loadder = false;
            });

});

Answer 3

I've found using the angular-loading-bar worked really well for long resolves due to network access.

Answer 4

How about adding content to the div that will be filled by ui-router once the properties have resolved?

In your index.html

<div ui-view class="container">
    Loading....
</div>

The user will now see "Loading..." while the properties are resolved. Once everything is ready the content will be replace by ui-router with your apps content.

Answer 5

My idea is to walk the path on state graph between transitioning states on $stateChangeStart and collect all involved views. Then every ui-view directive watches if corresponding view is involved in transition and adds 'ui-resolving' class on it's element.

The plunker demo introduces two root states: first and second, the latter has two substates second.sub1 and second.sub2. The state second.sub2 also targets footer view that belongs to its grandparent.