ui路由器封裝中的Angular.js循環依賴錯誤

Question

我遵循John Papa的角度樣式指南（https://github.com/johnpapa/angular-styleguide#routing）並在本指南中提供的角度ui路由器周圍使用自定義封裝。然而，包裝不爲我工作，並注入$狀態時，我得到一個循環依賴錯誤：

Uncaught Error: [$injector:cdep] Circular dependency found: $rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr <- logger <- $exceptionHandler <- $rootScope <- $state <- routerHelper 

我曾嘗試手動進$狀態使用$注射器但是這給了我一個未知的提供程序錯誤。

下面是代碼：

(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(); 
     } 
    } 

} 
})(); 

Answer 1

我覺得這是一個toastr問題，而不是UI路由器代碼。

John Papa將他的例子從簡單的「toastr」包中取出，而不是「angular-toastr」包。

toastr：https://github.com/CodeSeven/toastr

角toastr：https://github.com/Foxandxss/angular-toastr

隨着 'toastr' 包，他註冊使用恆定toastr的全局實例：

.module('app.core') 
    .constant('toastr', toastr); 

這使得它可用於注入進入記錄器服務：

logger.$inject = ['$log', 'toastr']; 

/* @ngInject */ 
function logger($log, toastr) { 

---

但是，如果您使用的角toastr包，toastr對象介紹了在某些角度對象的依賴集：

$rootScope <- $timeout <- $$rAF <- $$animateQueue <- $animate <- toastr 

，這將導致循環依賴，因爲$ rootScope有一個使用異常處理記錄器/ toastr對象：

toastr <- logger <- $exceptionHandler <- $rootScope 

---

我不知道如何正確地重構這個刪除循環依賴。所以作爲一個臨時解決方案，我改變了記錄器服務，以使用$ injector延遲解析toastr依賴。不理想，但我能夠轉移到其他緊迫的問題。

logger.$inject = ['$log', '$injector']; // 'toastr' 

/* @ngInject */ 
function logger($log, $injector) { // toastr 

    var service = { 
     showToasts: true, 

     info : info, 
     success : success, 
     warning : warning, 
     error : error, 

     // straight to console; bypass toastr 
     log  : $log.log 
    }; 

    return service; 
    ///////////////////// 


    function info(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.info(message, title); 
     $log.info('Info: ' + message, data); 
    } 

    function success(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.success(message, title); 
     $log.info('Success: ' + message, data); 
    } 

    function warning(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.warning(message, title); 
     $log.warn('Warning: ' + message, data); 
    } 

    function error(message, data, title) { 
     var toastr = $injector.get('toastr'); 

     toastr.error(message, title); 
     $log.error('Error: ' + message, data); 
    } 

}