Using factories in AngularUI Route? - angularjs

Question

I'm writing an Ionic app, which uses AngularUI's Router. I'd like to query localstorage using a factory I wrote, so I can determine whether to show a first-run screen or not.
My index.html loads scripts in this order:
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
And my routes config looks like this (truncated for brevity):
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider, storageFactory) {
$stateProvider
.state('myApp.mainscreen', {
url: '/main',
views: {
'side-menu21': {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}
}
})
// ...
$urlRouterProvider.otherwise('/menu/main')
Now I have a module called app.services, which contains my factory, storageFactory (I know, I'm going to move it out of the services module ;)). When I attempt to inject storageFactory like so:
angular.module('app.routes', ['app.services', 'storageFactory'])
.config(function($stateProvider, $urlRouterProvider, storageFactory) {
I get an error similar to this:
Error: [$injector:nomod] Module 'storageFactory' 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'm certain that my app has loaded app.services and storageFactory prior to loading, but I just can't seem to get it to work correctly.
How can I resolve this?

Answer 1

You can inject factories in UI router resolve blocks, without injecting them in the config block since it can only be injected with providers. For example:
$stateProvider
.state('myApp.mainscreen', {
url: '/main',
views: {
'side-menu21': {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}
},
resolve: {
firstRun: ['storageFactory', function(storageFactory) {
// Do what you want with storageFactory here!
// Full infos here: https://github.com/angular-ui/ui-router/wiki#resolve
}]
}
})

Answer 2

you cant inject services in config only provides but you can do it in app.run Here's the calling order:
app.config() //only provides can be injected
app.run()
directive's compile functions (if they are found in the dom)
app.controller()
directive's link functions (again, if found)
in your case you can also use route resolve property