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'

Answer 1

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 :)

Answer 2

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