獲取嵌套的角度模塊以正確注入

Question

我遇到了將角度烤麪包機服務注入工廠對象的問題我有，當我的烤爐注入時沒有錯誤，ngAnimate注入失敗的烤麪包機上。據我所知，我做得很對，所以我不確定我在這裏錯過了什麼。

錯誤消息：

Uncaught Error: [$injector:modulerr] Failed to instantiate module apptSetting due to: 
Error: [$injector:modulerr] Failed to instantiate module toaster due to: 
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to: 
Error: [$injec...<omitted>...1) 

主要應用文件：

//創建初始角應用模塊

var app = angular.module("testApp", ['angularSpinner', 'ngResource', 'ui.bootstrap', 'toaster', 'app.controllers', 'app.factories']); 
angular.module("app.factories", []); 
angular.module("app.controllers", []); 

工廠文件：

angular.module('app.factories').factory('dataFactory', ['$rootScope', '$resource', '$http', 'toaster', function ($rootScope, $resource, $http, toaster) { 
return { 
    UpdateOrderStatus: function(orderId) { 
     return $http({ 
      url: "/path/UpdateOrderStatus", 
      dataType: "json", 
      method: "POST", 
      data: { orderId: orderId }, 
      headers: { 
       "Content-Type": "application/json; charset=utf-8" 
      } 
     }).success(function(order) { 
      toaster.pop('success', "Order status Update", "Order status successfully updated."); 
     }).error(function() { 
      //toaster.error("Order status update failed."); 
     }); 
    } 

偏烤麪包機文件：

個

angular.module('toaster', ['ngAnimate']) 
.service('toaster', ['$rootScope', function ($rootScope) { 
this.pop = function (type, title, body, timeout, bodyOutputType) { 
    this.toast = { 
     type: type, 
     title: title, 
     body: body, 
     timeout: timeout, 
     bodyOutputType: bodyOutputType 
    }; 
    $rootScope.$broadcast('toaster-newToast'); 
}; 

腳本的順序列出：

    "~/Scripts/angular.js", 
        "~/Scripts/angular-resource.js", 
        "~/Scripts/ui-bootstrap-tpls-0.10.0.js", 
        "~/Scripts/spin.js", 
        "~/Scritps/angular-animate.min.js", 
        "~/Scripts/toaster.js", 
        "~/Scripts/ApptSettingApp.js", 
        "~/Scripts/angular-spinner.js", 
        "~/Scripts/dataFactory.js", 

更新到這個問題：

我已經這個問題發現，我在.NET應用程序中使用的角度和我的腳本都是在我的應用程序中使用打包器呈現。即使腳本文件參考是相同的，並且烤麪包機參考是正確的。如果你添加一個標籤到頁面，源代碼相同的腳本文件，它會正常工作。然而，這不能解決問題，它確實能夠更深入地瞭解原因。

Answer 1

好，

問題背後的原因是很簡單的，我是裝的同名不止一次服務......然而，由此產生的行爲是在平常，如果你不知道角度如何處理注入具有相同名稱的對象。就我而言，我在我的主應用程序中加載了烤箱模塊，在那裏創建了應用程序所需的所有模塊。然後，我將該指令添加到html頁面，以便烤麪包機可以顯示消息，這導致再次加載烤麪包機服務，但沒有提供者（我假設它已經加載到主應用程序中），因此提供者錯誤。

最初爲了解決這個問題，我在頁面上添加了一個腳本標記，並且一切正常，但是因爲我希望這是一個全局消息傳遞場景，所以不得不爲每個頁面添加腳本標記而困擾我，所以我保留挖掘。

那是當我注意到指令再次加載服務。所以它在主模塊中加載，然後指令加載它，最後在腳本標籤頁上覆蓋前面的2個實現。因此，正確解決問題不是在主應用程序中加載它，從html頁面中刪除腳本標記，並簡單地將該指令添加到頁面。

此行爲是角方式注入具有相同名稱的對象的方式的結果，最終最後一次派對獲勝。

我希望這有助於下一個遇到這樣的事情的人。

Answer 2

toaster添加模塊app.factories依賴性因爲toaster和dataFactory是在不同的模塊。

angular.module("app.factories", ['toaster']);