Angular JS错误:$injector:nomod Module在路由过程中不可用

Angular JS Error: $injector:nomod Module Unavailable during routing

本文关键字：过程中 路由 nomod 错误 JS injector Angular Module      更新时间：2023-09-26

所以，我对angular JS真的很陌生，我正在和我学校的一个团队一起为一家公司做一个项目作为实习。我必须先让路由工作，不管我试过什么，它都不会工作。我用angular JS 1.0.7试过了，我可以让它工作，但是用最新版本(1.5.7)，我只是不能经过很多很多小时的尝试。这是控制台当前给我的错误:

错误:美元注入器:nomod模块"app"不可用!您要么拼错了模块名，要么忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。据我所知，错误起源于index.html中的行，因为如果我删除它，错误就会消失，但是路由也不工作。

我真的很感激任何帮助。我知道我可能错过了一些非常基本的东西(代码可能相当潦草)，但我就是想不出来。哦，顺便说一句，我试着把内容从app.js索引。html内的脚本标签，然后它没有给出错误，但没有显示任何东西，真的很奇怪。我也尝试了很多不同的方法来做路由按照不同的教程或指南的指示，但我仍然不能让它工作。

代码:Index.html(修改为不让位于公司名称等)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/ui-bootstrap-1.3.3-csp.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
  <script src="js/angular.min.js"></script>
  <script src="js/angular-resource.min.js"></script>
  <script src="js/angular-route.min.js"></script>
  <script src="js/ui-bootstrap-1.3.3.min.js"></script> 
  <script src="js/angular-animate.min.js"></script>
  <script src="js/angular-touch.min.js"></script>
  <script src="app/app.js"></script>
  <script src="app/ctrl.js"></script>
  <script src="scripts/routing.js"></script>
</head>
<body>
<div class="navbar navbar-default" id="navbar">
  <div class="container" id="navbar-container">
    <div class="navbar-header">
      <a href="" class="navbar-brand">
        <small>
          <i class="glyphicon glyphicon-log-out"></i>
          Products and Company Info
        </small>
      </a><!-- /.brand -->
    </div><!-- /.navbar-header -->
    <div class="navbar-header pull-right" role="navigation">
      <a href="#howto" class="btn btn-sm btn-warning nav-button-margin"> <i class="glyphicon glyphicon-book"></i>&nbsp;Howto</a>
      <a href="#" class="btn btn-sm btn-warning nav-button-margin"> <i class="glyphicon glyphicon-home"></i>&nbsp;Home</a>
    </div>
  </div><!-- /.navbar-container -->
</div><!-- /.navbar -->
<div>
  <div class="container">
   <div ng-app="app">
    <h2>App name</h2>
    <br/>
    <div ng-view></div>
   </div>
  </div><!-- /.container -->
</div>

</body>
</html>

Code app.js: 

var app = angular.module('mainApp', ['ngResource', 'ngRoute']);
app.run(function($rootScope) {
});
代码ctrl.js 

app.controller("mainCtrl", function($scope) {
    $scope.firstName = "first name";
    $scope.lastName = "last name";
});
app.controller('howtoCtrl', function($scope) {
    $scope.message = 'How To guide here';   
});

代码routing.js: 

// configure our routes
    app.config(function($routeProvider) {
        $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'home.html',
            controller  : 'mainCtrl'
        })
        // route for the how to page
        .when('/howto', {
            templateUrl : 'howto.html',
            controller  : 'howtoCtrl'
        })
        // route for the test2 page
        .when('/testi2', {
            templateUrl : 'test2.html',
            controller  : 'test2Controller'
        });
    });
编辑:将ng-app="app"更改为ng-app="mainApp"后，我得到了以下错误

angular.min.js: 103 http://localhost/var/www/html/byow_routing_sahlays_2/byow/home.html 404(未找到)(匿名函数)@ angular.min.js: 103 n @ angular.min.js: 98 g @ angular.min.js: 95(匿名函数)@ angular.min.js: 130美元eval @ angular.min.js:消化@ angular.min.js 145美元:142美元应用@ angular.min.js: 145(匿名函数)@ angular.min.js: 20调用@ angular.min.js: 41 c @ angular.min.js:公元前20 @ angular.min.js: 21 ge @ angular.min.js: 19(匿名函数)@ angular.min.js: @ 315 b@ angular.min.js:37d @ angular.min.js:36angular.min.js:117错误:[$compile: tload] http://errors.angularjs.org/1.5.7/$compile/tpload?p0=home.html&p1=404&p2=Not%20Foundat Error (native)在http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js: 6:412在http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js: 156:281在http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js: 130:409$eval (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:107)在m.$digest (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:142:173)在m.$apply (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:401)At l (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:97:250)at K (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:101:373)at XMLHttpRequest.y.onload (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:102:397)

最后的编辑:谢谢大家，现在可以用了。问题首先是ng-app="app"应该是ng-app"mainApp"，而且在我最初将文件移动到它们自己的文件夹后，我忘记将文件夹包含到routing.js中的模板地址。

您在html中调用<div ng-app="app">，但您的应用程序命名为mainApp。尝试将<div ng-app="app">更改为<div ng-app="mainApp">

将以下代码添加到ctrl.js和routing.js的第一行

var app = angular.module('mainApp');

干杯!

相关文章：