Use a provider to run a command onEntet

Question

I'm using ui-router to change states in an AngularJS application. I have a provider that uses JavaScript to create a graph in the HTML where a div exists. Only one of the views has the div element used by my graph provider, so I want to call graphProvider.drawGraph() when I go to that state.

I'm struggling to get the graph to draw: the error I'm getting is, "Uncaught Error: [$injector:modulerr] Failed to instantiate module dataPortalApp due to: Error: [$injector:modulerr] Failed to instantiate module graphProvider due to: Error: [$injector:nomod] Module 'graphProvider' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

My router.js looks like:

(function() {
  angular.module('dataPortalApp')
    .config(DataPortalRouter);

  DataPortalRouter.$inject = ['$stateProvider', '$urlRouterProvider', '$locationProvider', 'graphProvider'];

  function DataPortalRouter($stateProvider, $urlRouterProvider, $locationProvider, graphProvider) {
    $urlRouterProvider.otherwise("/");
$stateProvider
  .state('dashboard', {
    url: '/dashboard',
    templateUrl: '/views/_dashboard.html',
    onEnter: function() {
      graphProvider.drawGraph()
    }
  })
  .state('index', {
    url: '/',
    templateUrl: '/views/_index.html'
  });

  }//end DataPortalRouter

})();

My app,js looks like:

(function(){
  angular.module('dataPortalApp', ['ui.router', 'graphProvider']);
})();

Any help is very appreciated!!

Solution

Make sure that all of your module scripts are being imported and in the right order. The new order should be:

1. angular.js
2. angular-ui-router.js
3. app.js
4. graphProvider.js (after app.js as it's part of your module, not another module as I originally thought.)

And remove the module dependency for graphProvider:

App.js:

(function(){
  angular.module('dataPortalApp', ['ui.router']);
})();

Comments

[tmurphree]

Thanks for the help! Now I get Uncaught Error: [$injector:nomod] Module 'dataPortalApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. I can't seem to win - if I put the app first, it wants the provider. If I put the provider first, it says the app is unavailable. More code is here github.com/tmurphree/projectFilter/tree/dev if you have a chance to look.

[Matthew Cawley]

@tmurphree I've corrected my original answer. Looking at your full code, graphProvider.js should go after app.js as that declares the module that you are attaching the graphProvider to (my mistake sorry). Going back to the original error, I think it's just becuse you were trying to inject the provider as a module and it's complaining because it's not a module, so just remove that from app.js.

[tmurphree]

You are the man! That totally fixed it! Sorry for the delayed response.

[Matthew Cawley]

Excellent, please mark as answer if this helped. Thanks