3

I have got a ui -router state here 

 var AccountParentState = {
            url: "/Account",
            views: accountrootview,
            stickA: true,
        },
            AccountAddState = {
                url: "/add",
                views: addaccountview,
                controller: "account-controller",
                resolve: {
                    Name: function () {
                        return "Joydeep";
                    }
                }
            };

        $stateProvider
            .state('account', AccountParentState)
            .state("account.add", AccountAddState)

And this is my controller :

angular.module('ngApp').controller('account-controller', ['$scope', '$state', "account", "plugin-factory", "Name", function ($scope
    , $state
    , account
    , plugins, Name) {

    console.log(Name);


}]);

When I am trying to resolve the Name within the account-controller . Its throwing the error as :

Unknown provider: NameProvider <- Name <- account-controller

My question is how to resolve this situation . Or resolve the data within the ui-router state using resolve property .

Joy
  • 6,438
  • 8
  • 44
  • 75

1 Answers1

1

To help you to see the issue, I created working plunker, which does use similar definition to the above states:

  var AccountParentState = {
    url: "/Account",
    views: { '' : 
       { template: 'Account state <hr/><div ui-view=""></div>',} },
    stickA: true, 
  },
    AccountAddState = {
      url: "/add",
      //views: addaccountview,
      templateUrl: 'tpl.html',
      controller: "account-controller",
      resolve: {
        Name: function() {
          return "Joydeep";
        }
      }
    };

  $stateProvider
    .state('account', AccountParentState)
    .state("account.add", AccountAddState)

Factories and controller:

  .factory('account', function(){return {}})
  .factory('plugin-factory', function(){return {}})
  .controller('account-controller', 
     ['$scope', '$state', "account", "plugin-factory", "Name"
     , function($scope, $state, account, plugins, Name) {    
       console.log(Name);
     }
  ])

And that is working, because controller was instantiated by the UI-Router, as a part of the state transition.

If, on the other hand, we will extend that example with this (see forked broken version) line in the index.html (outside of the state def)

<div ng-controller="account-controller"></div>
<div ui-view=""></div>

The issue will appear. Why? Because now the controller is not managed by the UI-Router. It is not injected by its infrastructure, not provided with configured value 'Name'. It is "plain angular" style..

Check the working solution here and the broken here

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • my html doesn't contain ng-controller . Its solely through the ui-router – Joy Feb 25 '15 at 06:56
  • That's why I created the plunker. You can observe the working version and compare with your solution. My is working, so you should be easily able to find out the difference. From my experience, the best way how to find out the issue, is to be able to compare with working stuff ;) Hope it helps... enjoy UI-Router – Radim Köhler Feb 25 '15 at 06:57
  • Kohler . It wasn't the issue actually . But yes your plunker helped me out the contextual resolve object to resolve within the state ref . – Joy Feb 25 '15 at 11:36
  • Great to see that, Joy, really. Enjoy amazing tool, `UI-Router` ;) – Radim Köhler Feb 25 '15 at 11:43