Angular UI-Router | Multiple Views : How to use the resolve object in multiple views?

Question

I have a situation here, where inside one state, I have multiple views and each view has to fetch data from the server side, so I wanted to use 'resolve' in every view which makes its own REST call to get data from the server.

Following is my attempt :

.state('dashboard.xyz.deal.details', {
        url: "/details/:dealId",
        resolve: {
            permissions : function(dealDetails, $stateParams){
                return dealDetails.getUnitPermissions($stateParams.dealId);
            }
        },
        views: {

            "viewDealDetails": {
                templateProvider: function(permissions, $http){
                    return $http.get('/modules/deal-details-module/partial/views/view-deal-details/view-deal-details.html')
                        .then(function(tpl){
                        return tpl.data;
                    });
                },
                controller: 'ViewDealDetailsCtrl',
                resolve: {
                    resolveDealDetails : function(dealDetails, $stateParams){
                        console.log('Inside the resolve of viewDealDetails');
                        return dealDetails.getDealDetails($stateParams.dealId);
                    }
                }
            },
            "viewFinePrints": {
                templateProvider: function(permissions, $http){
                    return $http.get('/modules/deal-details-module/partial/views/view-fine-prints/view-fine-prints.html')
                        .then(function(tpl){
                            return tpl.data;
                        });
                },
                resolve: {
                    resolveFinePrints: function(dealDetails){
//How can I inject the 'resolveDealDetails' as dependency in 'resolveFinePrints' ?
                        console.log('Inside the resolve of resolveFinePrints ::::::');
                        return dealDetails.getFinePrints('travel').then(function(data){
                            return data;
                        });
                    }
                },
                controller: 'ViewFinePrintsCtrl'
            }
        }
    })

So, I wanted to ask following questions :

Q1. Is it correct to use 'resolve' inside the multiple views? As I have read it from the official documentation that

The resolve keyword MUST be relative to state not views (in case you use multiple views).

Q2. If resolving the dependencies in the views is OK, then how can I insert one resolved dependency inside another view ?

For eg. in my code I want use 'resolveDealDetails' as the dependency for 'resolveFinePrints'

Community · Accepted Answer · 2017-05-23 12:07:29Z

3

Q2. If resolving the dependencies in the views is OK, then how can I >insert one resolved dependency inside another view ?

Child/nested views inherit from parent view so data you resolve in parent is available in child. See doc

If you want to share data between controllers (in case if views are not nested) you should use service. Then inject it into controllers and thus needed data will be available where you want it. See related question

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Aug 26, 2015 at 7:23

user2814599

1,2102 gold badges15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vaibhav Pachauri Over a year ago

Yes, I understand that. But, my problem is for two sibling views. Is it possible for two views at same level ? And if not, then how should I go about it ?

user2814599 Over a year ago

If I understand your example correct, 'permissions' should be available in all siblings. So if you want a data to be available in all siblings, you have to resolve it in parent state's resolve, where you resolve 'permissions'

Vaibhav Pachauri · Accepted Answer · 2015-08-31 16:43:51Z

So, following is the answer to the two questions posted :

Q1. Is it correct to use 'resolve' inside the multiple views? As I have read it from the official documentation that

The resolve keyword MUST be relative to state not views (in case you use multiple views).

As it turned out, the 'resolve' inside the nested views, worked just the way it works relative to state. So, the template of the nested views are rendered only after the dependencies are resolved.

Q2. If resolving the dependencies in the views is OK, then how can I insert one resolved dependency inside another view ?

In ui-router that resolved dependencies can't be provided as dependencies of the sibling view. We need to have a child-parent relationship among views to inject one resolved dependency into another view.

I hope this will help others as well :)

Collectives™ on Stack Overflow

Angular UI-Router | Multiple Views : How to use the resolve object in multiple views?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related