I've been following the angular style guide of John Papa (https://github.com/johnpapa/angular-styleguide#routing) and implementing a custom wrapper for angular ui-router as suggested. However, I'm encountering an issue with the wrapper causing a circular dependency error when trying to inject $state:
Uncaught Error: [$injector:cdep] Circular dependency found: $rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope <- $state <- routerHelper
I attempted manual injection of $state using $injector but unfortunately received an unknown provider error.
Below is the code snippet in question:
(function() {
'use strict';
angular
.module('blocks.router')
.provider('routerHelper', routerHelperProvider);
routerHelperProvider.$inject = ['$locationProvider', '$stateProvider', '$urlRouterProvider', '$injector'];
function routerHelperProvider($locationProvider, $stateProvider, $urlRouterProvider) {
this.$get = RouterHelper;
$locationProvider.html5Mode(true);
RouterHelper.$inject = ['$state'];
function RouterHelper($state) {
var hasOtherwise = false;
var service = {
configureStates: configureStates,
getStates: getStates
};
return service;
function configureStates(states, otherwisePath) {
states.forEach(function (state) {
$stateProvider.state(state.state, state.config);
});
if (otherwisePath && !hasOtherwise) {
hasOtherwise = true;
$urlRouterProvider.otherwise(otherwisePath);
}
}
function getStates() {
return $state.get();
}
}
}
})();