2017-04-10 61 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

什麼是控制檯中的錯誤。 ??只是F12 –

+0

angular.js:38未捕獲錯誤:[$ 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) 在angular.js:38 在angular.js:4920 爲p(angular.js:402) 在g(角。 (angular.js:1830) at c(angular.js:1909) at eb(angular.js:4802) at angular.js: 33340 at HTMLDocument.b(angular.js:3435) –

回答

0

我認爲這是因爲你正在使用縮小版本的角度。當您使用縮小的版本,你需要添加註入控制器作爲單獨的字符串數組的依賴這樣

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

這種方法應該爲所有的服務/控制器和指令來完成。

原因是當您的腳本被縮小時,依賴注入器無法識別哪個服務是哪個。如果你看到你的minify代碼,那麼你可能會注意到你注入的依賴關係,而不是那裏。相反,有一個或兩個字符引用相關的依賴關係。

所以角度是什麼是爲了找到哪些依賴是他們讓我們寫入依賴作爲一個字符串數組。然後噴油器可以輕鬆識別服務

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

可以在codepen.io編輯器中創建演示 –

+0

其工作交流科丁 –

相關問題