Angular-ui State - Multiple views not seeing my re

Question

For some reason, my resolvedData is not seeing by controllers when using multiple named views (angular-ui ui-router). Has anyone faced this issue?

$stateProvider
    .state('page',{
           abstract: true,
           templateUrl: ...,
           controller: abstractController
    })
    .state('page.index',
           url: '/page',
           resolve : {
               resolvedData: function(CONSTANTS){ return CONSTANTS.data;}
           },
           views: {
               home: {templateUrl: ..., 
                      controller: function(resolvedData){
                        ....
                      }
               },
               list: {templateUrl: ..., 
                      controller: function(resolvedData){
                        ....
                      }
               },
               edit: {templateUrl: ..., 
                      controller: function(resolvedData){
                        ....
                      }
               }
           }
     )

The error it gives me is: Error: [$injector:unpr] Unknown provider: resolvedDataProvider <- resolvedData. It is somehow interesting because it happens only in one of the views but not in the others.

Answer 1

I created small working example, showing that your stuff should work

This would be the CONSTANTS:

.factory('CONSTANTS', function() {
    return { data: { name :  "some name", number : "some number"} };
})

And the same (just explicitly annotated DI) state def:

  // States
  $stateProvider
    .state('page', {
      abstract: true,
      template: '<div>' 
       + '<div ui-view="home"></div>' 
       + '<div ui-view="list"></div></div>',
      controller: 'abstractController'
    })
    .state('page.index', {
      url: '/page',
      resolve: {
        resolvedData: ['CONSTANTS',
          function(CONSTANTS) {
            return CONSTANTS.data;
          }
        ]
      },
      views: {
        home: {
          templateUrl: 'tpl.html',
          controller: ['resolvedData','$scope',
            function(resolvedData, $scope) {
              console.log(resolvedData);
              $scope.resolvedData = resolvedData;
            }
          ],
        },
        list: {
          template: '<div>list view</div>'
        }
      }
    })

So, the draft of the resolve used above is working. It is the right way...The resolve function is provided with some service ... and returns its property data.

Check that all here