I'm trying to wait for the provider to finish initializing before ui-router goes on to load the state.
Every time you enter the state the camera should be enabled, and whenever it is left disabled again. I put this into a provider because it needs to be usable at the module.config
level:
.provider("Camera", function CameraProvider() {
function init() {
//async enableCamera
}
function exit() {
//disableCamera
}
function $get() {
return { init: init, exit: exit };
}
});
and the state:
var cam = DubCameraProvider.$get(); // this is a hack, but I don't know how to
$stateProvider
.state("CameraState", {
url: "/camera",
onEnter: cam.init,
onExit: cam.exit,
views: {
"view": {
// template: ...,
controller: "ControllerUsingCamera"
}
}
I tried using $q
to create a promise and the using resolve
to wait for that, but at the module.config
level $q cannot be injected (or I just don't know how to?).
How can I solve this?
$q
can be injected in the resolve object of your state without a problem:
Config:
angular.module('app').config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('root', {
'url': '/',
'controller': 'rootController',
'templateUrl': 'root.html',
'resolve': {
'data': [
'$q',
'$timeout',
function ($q, $timeout) {
var deferred = $q.defer();
$timeout(function() {
deferred.resolve({
'value': 'Foo'
});
}, 5000);
return deferred.promise;
}
]
}
});
}
]);
Controller:
angular.module('app').controller('rootController', [
'$scope',
'data',
function ($scope, data) {
$scope.value = data.value;
}
]);
Straight from the documentation on their wiki: https://github.com/angular-ui/ui-router/wiki#resolve
Here's a working example on Plunker: http://plnkr.co/edit/kJ99Hi0qWx7DJxOVzxgA?p=preview