CODEWITHSUNDEEP
angularjs
Millenial2020
Millenial2020

Reputation: 2923

angular ui router how to wait for child states to be loaded

I'm having problems loading my child states on an abstract true parent state.

This is my parent state

.state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            abstract: true
        })

This is the child states

.state('main.panels', {
            views: {
                'ticketsPanel': {
                    templateUrl: 'templates/ticketsPanel.html'
                },
                'productsPanel': {
                    templateUrl: 'templates/productsPanel.html'
                },
                'categoriesPanel': {
                    templateUrl: 'templates/categoriesPanel.html'
                }
            }
        })

I have a login page after I login I want to load all 3 child views.

This is the code that process the login.

.controller('loginController', function($scope, Authentication, $log, $state){
$scope.formData = {};

$scope.processForm = function(){
    Authentication.login($scope.formData);

    var promise = Authentication.getEmployee();

    promise.then(function(respond){
        localStorage.setItem('employee', JSON.stringify(respond));
        $state.go('main.panels');
    })

}

})

The $state.go('main.panels') activates the child state of the main state parent, but the problem I'm having is that DOM is showing the element have being loaded but I can only see them partially in my view. It's like they didn't got fully loaded.

My question is how can I wait for all the views in the main.panels to be loaded completely before I transition to that view.

Upvotes: 2

Views: 1496

Answers (2)

OfirYaron
OfirYaron

Reputation: 157

nested states also makes the views nested, meaning the router will look for a named ui-view within the parent template and render it there, and since that's not what you're trying to do you have to implicitly state that it's the parent view (absolute vs relative) like so:

.state('main.panels', {
        views: {
            'ticketsPanel@': {
                templateUrl: 'templates/ticketsPanel.html',
                resolve: function(LoginService){return LoginService};
            },
            'productsPanel@': {
                templateUrl: 'templates/productsPanel.html',
                resolve: function(LoginService){return LoginService};
            },
            'categoriesPanel@': {
                templateUrl: 'templates/categoriesPanel.html',
                resolve: function(LoginService){return LoginService};
            }
        }
    })

'productsPanel@' is like saying 'productsPanel' @ nothing which mean the upper parent or root view.

https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names

Upvotes: 0

Vaibhav Pachauri
Vaibhav Pachauri

Reputation: 2671

We do have 'resolve' property that can be provided in the definition of each and every state (or view) whatever you want to load. So what angular-ui-router does is that it resolves the 'resolve' property first and only then the HTML template is being rendered on the browser.

You can define the child state in the following way : 

.state('main.panels', {
            views: {
                'ticketsPanel': {
                    templateUrl: 'templates/ticketsPanel.html',
                    resolve: function(LoginService){return LoginService};
                },
                'productsPanel': {
                    templateUrl: 'templates/productsPanel.html',
                    resolve: function(LoginService){return LoginService};
                },
                'categoriesPanel': {
                    templateUrl: 'templates/categoriesPanel.html',
                    resolve: function(LoginService){return LoginService};
                }
            }
        })

You can even read the following links for more details :

https://github.com/angular-ui/ui-router/wiki

https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-resolved-dependencies

http://www.jvandemo.com/how-to-resolve-angularjs-resources-with-ui-router/

It has been explained in detail. Hope this helps :)

Upvotes: 2

Related Questions