2016-03-19 4 views
1

Hallo und entschuldige mein Englisch.Arbeiten mit mehreren Modulen in verschiedenen Dateien in Angular js

Mein Problem ist folgendes: Ich habe ein Anfänger zu Angular js bin (derzeit Version 1.4 Lernen), und ich möchte, dass meine Anwendung in zwei Module wie folgt trennen:

app.js

(function(){ 
var app = angular.module('store', ['store-products', 'ngAnimate', 'ui.bootstrap']); 



    app.controller('StoreController', function(){ 
     ... 
     }); 

    app.controller('ReviewController', function(){ 
     ... 
     }; 

     this.rateOnClick = function(){ 
      ... 
     }; 

     this.addReview = function(product){ 
      ... 
     }; 
     }); 


    . 
    . 
    . 
})(); 

products.js

(function(){ 

    var app = angular.module('store-products', []); 

    app.directive('productTitle', function(){ 
      ... 
     }); 

    app.directive('productPanels', function(){ 
      ... 

     }); 
})(); 

index.html

<html> 
    <head> 
    <title>My Angular App!</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script> 
    <link href="styles.css" rel="stylesheet"> 
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="app.js"></script> 
    <script src"products.js"></script> 
... 
</html> 

Alle meine Dateien befinden sich im selben Ordner. app.js ist das primäre Modul, so weit, verstehe ich das beinhaltet sind in Ordnung, aber ich habe immer noch den Fehler:

Uncaught Error: [$injector:modulerr] Failed to instantiate module store due to: 
Error: [$injector:modulerr] Failed to instantiate module store-products due to: 
Error: [$injector:nomod] Module 'store-products' 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. 

Kann nicht someon herauszufinden, warum dies geschieht?

+0

Sie den Namen der Anwendung bedeuten Sie? –

+0

Dies könnte helfen: http://www.codeproject.com/Articles/862602/Define-multiple-Angular-apps-in-one-page –

Antwort

1

LOL, das Problem nur herausgefunden, die Linie war :

<script src"products.js"></script> 

dieses Fest wie:

<script src="products.js"></script> 
0

Sie müssen Ihr Produktscript vor Ihr App-Skript einfügen.

+0

Ich stornierte die Reihenfolge, gleichen Fehler –

+0

Dies sollte Ihr Problem gelöst haben. Sind Sie sicher, dass es keinen weiteren Fehler in der Konsole gibt? Wenn Sie dies sehen und Ihre Skripte in der richtigen Reihenfolge referenziert werden, gab es normalerweise einen Syntaxfehler in products.js, der einen Kettenreaktionsfehler verursachte, der zu dem Modulinjektionsfehler führte, den Sie melden. – Lex

+0

Im Ernst, ich habe sogar ein neues Modul ohne Anweisungen oder Controller namens test.js erstellt und versucht, es einzuschließen, aber den gleichen Fehler. –

0

nicht store-Produkte in Ihrem app.js Code, weil in diesem enthalten [] fügen wir Richtlinien und es gibt keine Richtlinie Bezeichnung ‚store-Produkte‘

+0

Ich bin mir nicht sicher, wer das Upvoted hat, aber diese Antwort ist falsch. Was das OP getan hat, ist gültig und ist die Art, wie andere Angular-Module als Abhängigkeiten in das gerade definierte Modul eingefügt werden. – Lex

Verwandte Themen