出现错误：模块“myApp”不可用！使用 AngularJS 1.6.1、Node.js 和 Express.js答案

【问题标题】：Got Error: Module 'myApp' is not available! using AngularJS 1.6.1, Node.js and Express.js出现错误：模块“myApp”不可用！使用 AngularJS 1.6.1、Node.js 和 Express.js
【发布时间】：2017-09-25 05:27:45
【问题描述】：

我是 angularJS、Node 和 Express 方面的初学者，并且正在开始使用 angularJS、Node 和 Express 编写一个非常简单的待办事项列表的教程。我正在使用 Node.js v7.9.0、Express.js v4.15.2 和 AngularJS v1.6.1。我正在使用 nodemon 来运行我的 server.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
ensure@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:2107:38
module@https://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
forEach@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:11
loadModules@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4720:5
createInjector@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:4642:19
doBootstrap@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1838:20
bootstrap@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:1859:12
angularInit@https://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
trigger@https://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”模块没有定义？

【问题讨论】：

标签： javascript angularjs node.js express

【解决方案1】：

我的 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>

【讨论】：

谢谢，但它不起作用...显示 {{it}} 而不是 'works'

【解决方案2】：

问题是由于缺少 ngRoute 模块引起的。请看AngularJS 1.2 $injector:modulerr

【讨论】：

我不明白，我将 appRoutes 包含在我的 app.js 中，并带有“angular.module('myApp', ['appRoutes']);”，不是吗？
你需要定义模块 angular.module('myapp', ['ngRoute']);

【解决方案3】：

您需要更改文件的顺序。当您在 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'
                      }
                )
    });

【讨论】：

谢谢，但我不断收到 2 个语法错误，第三个错误仍然告诉我模块 'myApp' 不可用
@ElyaBernard，通过stackoverflow.com/questions/28894074/…