2017-04-10 5 views
0

zunächst dachte ich, dass es wegen der ngRoute-Modul sein kann, so habe ich die Abhängigkeit als auch obwohl bekommen die gleiche error.as ein Anfänger das mein Kopf isst .... Jungs jede Hilfe

index.html

<!DOCTYPE html> 
<html ng-app="myApp"> 

<head> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
    <title>Contact List Application</title> 

</head> 

<body> 
    <div class="container" ng-controller="AppCtrl"> 
     <h1>Contact List for Members</h1> 
     <table class="table"> 
      <thead> 
       <tr> 
        <th>Name</th> 
        <th>Email</th> 
        <th>contact</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="contact in contactlist"> 
        <td>{{contact.name}}</td> 
        <td>{{contact.email}}</td> 
        <td>{{contact.number}}</td> 
       </tr> 
      </tbody> 

     </table> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.min.js"></script> 

    <script src="controllers/controller.js"> 

    </script> 
</body> 

</html> 

controller.js

angular.module('myApp', ['ngRoute']) 
    .controller('AppCtrl', function AppCtrl($scope) { 


     person1 = { 
      name: 'tm', 
      email: '[email protected]', 
      number: '(111) 222-2222' 
     }; 
     person2 = { 
      name: 'dk', 
      email: '[email protected]', 
      number: '(111) 222-2223' 
     }; 
     person3 = { 
      name: 'hey', 
      email: '[email protected]', 
      number: '(111) 222-2224' 
     }; 

     var contactlist = [person1, person2, person3]; 
     $scope.contactlist = contactlist; 
    }); 

den Code auf der Online-Code-Compiler zu testen seine wo rking gut, aber wenn ich diesen Code in Node-Server localhost ausgeführt wird, wirft er den obigen Fehler.

+0

Was ist ein Fehler in der Konsole? ?? Nur F12 –

+0

angular.js: 38 Uncaught Fehler: [$ injector: modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=myApp&p1=Error%3A%2...ogleapis.com% 2Fajax% 2Flibs% 2Fangularjs% 2F1.6.3% 2Fangular.min.js% 3A22% 3A179) bei Angularjs: 38 bei Angularjs: 4920 bei p (Angularjs: 402) bei g (eckig. js: 4880) bei eb (Angularjs: 4802) an C (Angularjs: 1909) bei Pc (Angularjs: 1930) bei Ue (Angularjs: 1815) bei Angularjs: 33340 bei HTMLDocument.b (angular.js: 3435) –

Antwort

0

Ich denke, das passiert, weil Sie eine verkleinerte Version des eckigen verwenden. Wenn Sie verkleinerte Version verwenden, müssen Sie die Abhängigkeiten Controller als separate String-Array wie diese

.controller('AppCtrl',['$scope', function AppCtrl($scope) {

Dieser Ansatz injiziert hinzufügen sollte für alle Dienste/Controller und Richtlinien durchgeführt werden.

Der Grund ist, wenn Ihr Skript wird minimiert, Dependency Injector nicht in der Lage zu identifizieren, welcher Dienst welcher ist. Wenn Sie Ihren Minify-Code sehen, bemerken Sie möglicherweise, dass die Abhängigkeit, in die Sie injiziert haben, nicht dort ist. Stattdessen gibt es ein oder zwei Zeichen, die auf relevante Abhängigkeiten verweisen.

Also was eckige tut ist, um zu finden, welche Abhängigkeit erlaubt es uns, die Abhängigkeit als String-Array zu schreiben. Dann kann der Injektor die Dienste leicht identifizieren.

angular.module('myApp', ['ngRoute']) 
    .controller('AppCtrl',['$scope', function AppCtrl($scope) { 


     person1 = { 
      name: 'tm', 
      email: '[email protected]', 
      number: '(111) 222-2222' 
     }; 
     person2 = { 
      name: 'dk', 
      email: '[email protected]', 
      number: '(111) 222-2223' 
     }; 
     person3 = { 
      name: 'hey', 
      email: '[email protected]', 
      number: '(111) 222-2224' 
     }; 

     var contactlist = [person1, person2, person3]; 
     $scope.contactlist = contactlist; 
    }]); 
+0

Ich habe Ihren Vorschlag versucht, obwohl immer noch das Problem bestehen –

+0

können Sie eine Demo erstellen –

+0

in codepen.io Editor seine Arbeit ac entsprechend –

Verwandte Themen