angular.js Uncaught Fehler: [$ injector: modulerr] beim Einspritzen einer Fabrik

Question

Ich versuche, eine Fabrik namens recipesApp.recipeData in meinem MainController zu injizieren, sobald ich es hinzugefügt habe, brach die App und ich habe folgende erhalten Fehler:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module recipesApp due to: 
Error: [$injector:modulerr] Failed to instantiate module recipesApp.recipeData due to: 
Error: [$injector:nomod] Module 'recipesApp.recipeData' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. 

Mein Haupt APP-Modul wird wie folgt geschrieben:

var app = angular.module('recipesApp', ['ngRoute', 'recipesApp.recipeData']);

My Controller:

app.controller('MainController', ['$scope', '$http', '$location', '$rootScope', 'recipeData', 
    function($scope,$http,$location,$rootScope,recipeData) {...}]); 

Mein Rezept Fabrik:

angular 
.module('recipesApp.recipeData', []) 
.factory('recipeData', function($http) { 
    return { 
     getAllRecipes: function(){ 
     $http.get('/allrecipes'); 
     } 
    };  
}); 

habe ich versucht, die Dateistruktur zu ändern, die Konvention die Dateibenennung. Ich habe versucht, es einfach auf den Controller selbst in der gleichen Datei zu verknüpfen, ich habe die Reihenfolge geändert, in der es injiziert wird, und ich habe die Rechtschreibung dreifach überprüft. Irgendwelche Vorschläge wären sehr hilfreich!

Answer 1

Sie versuchen, $http als Modulabhängigkeit hinzuzufügen, $http ist ein Dienst, kein Modul. Entfernen Sie es von Ihrem recipesApp.recipeData Modulabhängigkeiten

angular 
.module('recipesApp.recipeData', []) 
.factory('recipeData', function($http) { 
    return { 
     getAllRecipes: function(){ 
     $http.get('/allrecipes'); 
     } 
    };  
}); 

Auch stellen sicher, dass alle .js Dateien vorhanden sind in Ihrem index.html