4

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.

kitimenpolku
  • 2,604
  • 4
  • 36
  • 51

1 Answers1

3

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

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Ok... so it has to be then some duplication or missed type thing. Im leaving this open until I solve it. Thanks for the plnkr. Its enough to know that it should be working :) – kitimenpolku Jan 26 '15 at 12:36
  • Great to see that... yes, I would expect some typo... Good luck with `UI-Router` anyhow – Radim Köhler Jan 26 '15 at 12:37
  • Just for the readers, I ended up writing the resolve in the abstract state, defining a controller and filling the $scope with the data I need. Children state can see this information properly. Really similar to what it is defined in Nested States and Nested Views (https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views). http://plnkr.co/edit/gmtcE2?p=preview – kitimenpolku Jan 26 '15 at 13:11
  • @Pureferret The example written by Radim Köhler demostrates that it should be working. I guess that I had some typo. Do you still need help with it? Did you experience the same issue? – kitimenpolku Feb 28 '15 at 19:16
  • @kitimenpolku I was trying to adapt it to something slightly different. I've got mine working though. Thanks for asking. – AncientSwordRage Feb 28 '15 at 21:56