My attempts to inject a resolve object containing loaded data into my controller are resulting in an Unknown Provider error :
Error message: Unknown provider: configServiceProvider <- configService
Below is the code I am working with:
StateProvider
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "#",
resolve: {
configService: function () {
return {
"helloText": "Welcome in Test Panel"
};
}
}
})
Controller
function MainCtrl($scope, configService) {
$scope.config = configService;
};
angular.module('dot', ['ui.router'])
.config(config)
.controller('MainCtrl', MainCtrl)
Snippet
function config($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("#");
$stateProvider
.state('index', {
abstract: true,
url: "/index",
templateUrl: "#",
resolve: {
configService: function() {
return {
"helloText": "Welcome in Test Panel"
};
}
}
})
};
function MainCtrl($scope, configService) {
$scope.config = configService;
};
(function() {
angular.module('dot', [
'ui.router', // Routing
])
.config(config)
.run(function($rootScope, $state) {
$rootScope.$state = $state;
})
.controller('MainCtrl', MainCtrl)
})();<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<div ng-app="dot">
<div ng-controller="MainCtrl as main">
<div ui-view>
</div>
</div>
</div>I seem to be encountering issues due to defining my resolve object after the controller has already loaded. As someone new to angularJS, any guidance on resolving this issue would be greatly appreciated.
Thank you.