有錯誤：模塊'myApp'不可用！使用AngularJS 1.6.1，Node.js和Express.js

我是angularJS，Node和Express中的一個begginer，並且正在使用angularJS，Node和Express編寫一個非常簡單的待辦事項列表的教程。我正在使用Node.js v7.9.0，Express.js v4.15.2和AngularJS v1.6.1。我正在使用nodemon來運行我的server.js。有錯誤：模塊'myApp'不可用！使用AngularJS 1.6.1，Node.js和Express.js

我不斷收到3個錯誤，我不明白爲什麼：

SyntaxError: expected expression, got '<'[En savoir plus] app.js:1 
SyntaxError: expected expression, got '<'[En savoir plus] route.js:1 
Error: [$injector:modulerr] Failed to instantiate module myApp due to: 
[$injector:nomod] Module 'myApp' 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. 
http://errors.angularjs.org/1.6.1/$injector/nomod?p0=myApp 
minErr/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:68:12 
module/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:2183:17 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:2107:38 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:2181:14 
loadModules/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4736:22 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:11 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4720:5 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4642:19 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1838:20 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1859:12 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1744:5 
@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:32977:5 
[email protected]://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:3314:5

這是我的文件路徑：

-todolist 
--node_modules 
--public 
---views 
----home.hmtl 
---app.js 
---index.html 
---route.js 
--package.json 
--server.js

我server.js文件：

var express = require('express'); 
var app = express(); 
var bodyparser= require('body-parser'); 
var method = require('method-override'); 

//application 
app.get('*', function(req, res){ 
    res.sendFile('/public/index.html', {root : __dirname}); 
}); 

app.listen(3000);

我的app.js：

angular.module('myApp', ['appRoutes']);

個

我route.js：

angular.module('appRoutes', ['ngRoute']) 
.config(function($routeProvider){ 
    $routeProvider 
     .when('/', { 
        templateUrl: '/views/home.html' 
        } 
      ) 
});

我的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script> 
     <script src="app.js"></script> 
     <script src="route.js"></script> 
     <title>Une To-Do Liste</title> 
    </head> 
    <body ng-app="myApp"> 
     <h1>To-do List</h1> 
     <div ng-view></div> 
    </body> 
</html>

而且home.html的包含了一個簡單的測試，但無法顯示：

<h1>Hello</h1>

對於網站只顯示我的index.html中的字符串「待辦事項列表」。爲什麼我從app.js和route.js中得到2個語法錯誤？爲什麼我的'myApp'模塊沒有定義？

來源

2017-04-27 Elya Bernard

該問題是由於缺少ngRoute模塊包含引起的。請大家看一下AngularJS 1.2 $injector:modulerr

來源

2017-04-27 12:18:27

我不不明白，我包括appRoutes在我的app.js與「angular.module（'myApp'，['appRoutes']）;」，我不是嗎？ –

您需要定義模塊角度。模塊（'myapp'，['ngRoute']）; – 2017-04-27 12:36:24

我app.js：

angular.module('myApp', ['ngRoute']);

我route.js：

angular.module('myApp') 
    .config(function($routeProvider){ 
     $routeProvider 
      .when('/', { 
         templateUrl: '/views/home.html' 
         } 
       ) 
    }); 
    //with test controller 
    angular.module('myApp') 
     .controller('TestCtrl',['$scope', function($scope){ 
      $scope.it = 'works'; 
     }]);

的index.html

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="UTF-8"> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script> 
      <script src="app.js"></script> 
      <script src="route.js"></script> 
      <title>Une To-Do Liste</title> 
     </head> 
     <body ng-app="myApp"> 
      <div ng-controller="TestCtrl"> 
       <h1>To-do List</h1> 
      it {{it}} 
      </div> 
     </body> 
    </html>

來源

2017-04-27 12:20:21

謝謝，但它不工作...顯示{{it}}而不是'works' –

您需要更改的順序文件。當您在myApp中注入appRoutes時，應該定義它。

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

定義在所有需要的模塊app.js

angular.module('appRoutes', ['ngRoute']); //Define module 
angular.module('myApp', ['appRoutes']);

在route.js，檢索定義appRoutes並添加配置部分

angular.module('appRoutes') 
    .config(function($routeProvider){ 
     $routeProvider 
      .when('/', { 
         templateUrl: '/views/home.html' 
         } 
       ) 
    });

來源

2017-04-27 12:23:21 Satpal

謝謝，但我一直geting 2語法錯誤，第三個錯誤仍然告訴我，模塊'myApp'不可用 –

@ElyaBernard，通過http://stackoverflow.com/questions/28894074/syntaxerror-expected-expression-got – Satpal

有錯誤：模塊'myApp'不可用！使用AngularJS 1.6.1，Node.js和Express.js

回答

相關問題