2017-04-10 7 views
0

最初は、ngRouteモジュールが原因である可能性があると考えました。同じerror.asこれはみんなどんな助け....

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; 
    }); 

を私の頭を食べている初心者その臥しかし、私はこのコードをノードサーバlocalhostで実行しているときに、上記のエラーが発生します。

+0

コンソールでエラーが発生しました。 ?? Just F12 –

+0

angular.js:38未知のエラー:[$ injector:modulerr] http://errors.angularjs.org/1.6.3/$injector/modulerr?p0=myApp&p1=Error%3A%2...ogleapis.com% (angle.js:402) でのangle.js:38 のangular.js:4920 (p。angular.js:402) のg(angular。 JS:4880)EB(angular.jsで :Cで4802) (angular.js:1909)は、PC(angular.jsで :1930)UEで (angular.js:1815)angular.jsで 。 33340 HTMLDocument.b(angular.js:3435) –

答えて

0

私は角度の縮小バージョンを使用しているため、これが起こると思います。あなたはこの

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

このアプローチのような別の文字列配列としてコントローラに注入された依存関係を追加する必要が縮小さバージョンを使用している場合は、すべてのサービス/コントローラとディレクティブのために行われるべきです。

あなたのスクリプトが小型化されているため、依存性インジェクタはどのサービスがどれであるかを特定できません。あなたの縮小コードを見ると、そこに挿入した依存関係に気付くかもしれません。その代わりに、関連する依存関係を参照する1つまたは2つの文字があります。

どのような角度依存性が文字列配列として依存関係を書くことができるかを見つけるためにはどの角度がありますか?その後、インジェクタは簡単にサービスを識別できます

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

まだ問題が残っていてもあなたの提案を試してみました –

+0

デモを作成することができます –

+0

codepen.ioエディタ丁寧に –

関連する問題