Angular Initialisierungsfehler in app.js

Question

Also versuche ich auf den Angular Zug aufzuspringen, und ich wurde mit dem Aufbau eines SPA beauftragt, für den ich AngularJS mit ASP.Net MVC Web API ausgewählt habe (ich bin ein .Net Entwickler). Als Fan von stark typisierten Sprachen habe ich während meiner gesamten Karriere Javascript vermieden, aber Frameworks wie AngularJS und die anderen Plugins der letzten Jahre haben es unmöglich gemacht, sie zu ignorieren. Also bin ich hier und bitte um eine Anleitung.

Ich habe mir die Tutorials angeschaut, die Beispielcode-Projekte gemacht und etwas über PluralSight gelernt, und ich habe Dinge, zumindest aus einer grundlegenden Perspektive. Ich habe einen reichen Hintergrund in MVVM und MVC, so SOC ist eine große Sache für mich. Ich mag die MVC-Struktur, die Angular bietet, weswegen ich hauptsächlich diesen Weg gegangen bin.

Jetzt lassen Sie mich zu meinem Problem (s) kommen. Ich initialisiere mein Modul (momentan) auf meiner Masterseite (_Layout.cshtml), was ich aus Gründen der Einfachheit beim Tweaking und Experimentieren getan habe.

<script> 
    angular.module('xcmApp', ['ngRoute', 'ngResource']) 
     .config(function ($routeProvider) { 
      $routeProvider 
      .when('/', 
      { 
       controller: 'companiesController', 
       templateUrl: 'views/companylist.html' 
      }) 
      .when('/Reports', 
      { 
       controller: 'reportsController', 
       templateUrl: 'views/reportlist.html' 
      }) 
      .otherwise({ redirectTo: '/' }) 
     }) 
     .factory('companiesFactory', ['$resource', 
      function ($resource) { 
       return $resource('/api/companies', {}, { 
        query: { method: 'GET', params: {}, isArray: true } 
       }); 
      } 
     ]) 
     .controller('companiesController', function ($scope, companiesFactory) { 
      $scope.Companies = companiesFactory.query(); 
    }); 

</script> 

Aber jetzt, wo ich bin bereit, tiefe Konzepte zu bewegen, ich will hinaus in ihre entsprechenden Dateien meine Skripte brechen. Das heißt, app.js und zugehörigen Steuerungen/Fabriken/Dienstleistungen etc. Aber wenn ich mich bewege das Skript in app.js und verweisen Sie in _Layout.cshtml, es Fehler:

<script src="~/app.js"></script> 

Error: [$injector:unpr] Unknown provider: a

Jetzt gibt es keinen Punkt in weiterhin in Controller-Dateien usw. auszubrechen, wenn ich nicht einmal die app.js richtig arbeiten kann, also bin ich hier festgefahren. Ich weiß, dass es hier einige brillante AngularJS-Entwickler gibt, die wahrscheinlich wissen, was ich vermisse, bevor ich überhaupt so weit gelesen habe, und ich bin dankbar für Ihre Unterstützung.

Jeder, der meine Aufsicht hervorheben kann, wird heute ein Superstar für mich sein. Danke im Voraus!

EDIT:

Hier ist mein Stack Trace:

0x800a139e - JavaScript runtime error: [$injector:modulerr] Failed to instantiate module xcmApp due to: 
Error: [$injector:unpr] Unknown provider: a 
http://errors.angularjs.org/1.3.15/$injector/unpr?p0=a 
    at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4015:13) 
    at getService (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4162:11) 
    at invoke (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4191:9) 
    at runInvokeQueue (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4109:11) 
    at Anonymous function (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4118:11) 
    at forEach (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:323:11) 
    at loadModules (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4099:5) 
    at createInjector (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:4025:3) 
    at doBootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1452:5) 
    at bootstrap (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:1473:5) 
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=xcmApp&p1=Error%3A%20%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20a%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Funpr%3Fp0%3Da%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4015%3A13)%0A%20%20%20at%20getService%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4162%3A11)%0A%20%20%20at%20invoke%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4191%3A9)%0A%20%20%20at%20runInvokeQueue%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4109%3A11)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4118%3A11)%0A%20%20%20at%20forEach%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A323%3A11)%0A%20%20%20at%20loadModules%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4099%3A5)%0A%20%20%20at%20createInjector%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A4025%3A3)%0A%20%20%20at%20doBootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1452%3A5)%0A%20%20%20at%20bootstrap%20(http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.js%3A1473%3A5) 

ERINNERUNG:

Mein Problem ist nicht, dass es nicht funktioniert, es funktioniert. Es funktioniert nur, wenn ich das Javascript aus meiner HTML-Seite nehme und es in eine referenzierte Datei app.js lege.

Answer 1

Zurück zur Dokumentation. Sie verwenden eine schlechte Methode zum Definieren Ihrer Anwendung. Versuchen:

var MyApp = angular.module('MyApp', ['ngRoute' , 'ngSanitize']) ; 

und dann MyApp verwenden, um Controller hinzufügen, Filter usw.

EDIT:

BTW, es ist eine gute Praxis, die Javascripts in separaten Dateien für SPA zu schreiben (Sie sind Ich schreibe kein kleines Projekt, denke ich).

Answer 2

Ich habe keinen ASP.net-Hintergrund, aber ich denke, dass es nicht wichtig wäre, Ihre Angular-Frage zu beantworten.

zuerst Ihre Module wie folgt erklären:

angular.module('myModule', []); 

und sie im oder Dateien wie diese:

angular.module('myModule').controller/foactory/.... 

So Ihr Code wie folgt aussehen sollte:

//xcmApp.module.js 
angular.module('xcmApp', ['ngRoute', 'ngResource']); 

//xcmApp.config.js 
angular.module('xcmApp').config(function ($routeProvider) { 
    $routeProvider 
     .when('/', 
      { 
       controller: 'companiesController', 
       templateUrl: 'views/companylist.html' 
      }) 
     .when('/Reports', 
      { 
       controller: 'reportsController', 
       templateUrl: 'views/reportlist.html' 
      }) 
     .otherwise({redirectTo: '/'}) 
}); 

//xcmApp.factory.js 
angular.module('xcmApp').factory('companiesFactory', ['$resource', 
    function ($resource) { 
     return $resource('/api/companies', {}, { 
      query: {method: 'GET', params: {}, isArray: true} 
     }); 
    } 
]); 

//xcmApp.controller.js 
angular.module('xcmApp').controller('companiesController', function ($scope, companiesFactory) { 
    $scope.Companies = companiesFactory.query(); 
}); 

EDIT:

In Bezug auf den Fehler, bedenken Sie, dass Ihre Abhängigkeiten in der richtigen Reihenfolge sein müssen. So Ihre index.html (vorausgesetzt, Sie verwenden keine Skript-Loader verwenden noch) sollte wie folgt aussehen:

<script src="/*path to angular*/"></script> 
<script src="/*path to ngRoute*/"></script> 
<script src="/*path to ngResource*/"></script> 

<script src="/*path to xcmApp.module.js*/"></script> //setting your app module must come first 
<script src="/*path to xcmApp.config.js*/"></script> 
<script src="/*path to xcmApp.factory.js*/"></script> //must come before the controller in your case 
<script src="/*path to xcmApp.controller.js*/"></script> 

Answer 3

Es sieht aus wie Sie ein paar Erklärung Stücke im Zusammenhang mit Dependency Injection in Ihrem Controller-Definition fehlt.

Bevor ich den spezifischen Code und die Korrekturen poste, möchte ich ein nützliches Tool zur Fehlerbehebung für Dependency Injection-Probleme erwähnen. Angular hat eine eingebaute Direktive ng-strict-di. Diese Richtlinie ist eine Ergänzung zu ng-app. Vom ng-app documentation:

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide , and useful debugging info will assist in tracking down the root of these bugs.

Nun, um den Code in Ihrem Beitrag:

Ihr Controller verwendet nicht explizite Funktion Anmerkung. Bei expliziter Funktionsannotation übergeben Sie ein Zeichenfolgenarray mit Abhängigkeiten, gefolgt von der Funktion. Dies stellt sicher, dass Angular selbst dann, wenn die Minification die Funktionsparameter umbenennen sollte, immer noch erkennen kann, welche Abhängigkeit der Funktion zu liefern ist. Sie haben explizite Annotationen in Teilen Ihres Codes verwendet, diese fehlen jedoch in Ihrer Controller-Definition.

Dies ist klassisch einfach zu identifizieren, mit Error: [$injector:unpr] Unknown provider: a, obwohl Sie nie einen Anbieter namens a definiert. ng-strict-di würde diesen Controller-Code kennzeichnen.

Hier ist der aktuelle Code und die vorgeschlagene Lösung.

Statt:

.controller('companiesController', function ($scope, companiesFactory) { 

Versuchen:

.controller('companiesController', ['$scope', 'companiesFactory', function ($scope, companiesFactory) {