Utilizing angular ui router, I find myself in need of injecting $scope and pre-fetched data into my controller's constructor.
Initially, everything works smoothly when only including the promise in the resolve object. However, as soon as I add the $scope service to the list of injectables, angular ui router fails to resolve the route.
The following is a snippet of working TypeScript code:
$stateProvider.state('parent.child', {
url: '/child',
template: 'I am the child state',
controller: 'TestController',
controllerAs: 'vm',
resolve: {
viewModel:initializeControllerViewModel
}
});
initializeControllerViewModel.$inject = [
'$stateParams',
'$q',
'$timeout'
];
function initializeControllerViewModel(
$stateParams: ng.ui.IStateParamsService,
$q: ng.IQService,
$timeout:ng.ITimeoutService)
{
let deferred = $q.defer();
$timeout(() =>
{
deferred.resolve({
property1: 'foo'
});
}, 500);
return deferred.promise;
}
class TestController
{
constructor(
viewModel: any)
{
//viewModel should be {property1: 'foo'}
}
}
Here is the non-functional code:
$stateProvider.state('parent.child', {
url: '/child',
template: 'I am the child state',
controller: 'TestController',
controllerAs: 'vm',
resolve: {
'$scope': '$scope',
viewModel:initializeControllerViewModel
}
});
class TestController
{
constructor(
$scope: ng.IScope,
viewModel: any)
{
//$scope should be injected
//viewModel should be {property1: 'foo'}
}
}