Question

所以，我对棱角分明的JS真的很陌生，我正在为一家公司的项目工作，这个公司有一个团队来自我校作为实习。我必须先让路由工作，但无论我尝试过什么，它都无法工作。我用角度JS 1.0.7尝试了它，并且我可以使它工作，但是使用最新版本（1.5.7）我只是经过了许多小时的尝试。这是控制台目前给我的错误：

错误：$ injector：nomod 模块不可用模块＆＃39; app＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。据我所知，错误源自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>

代码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 =＆＃34; app＆＃34;到ng-app =＆＃34; mainApp＆＃34;，我收到了以下错误

最终编辑：谢谢你们，它现在有效。问题首先是ng-app =＆＃34; app＆＃34;应该是ng-app＆＃34; mainApp＆＃34;，在我最初将文件移动到自己的文件夹后，我忘了将文件夹包含到routing.js中的tempaltes地址。

Answer 1

您可以使用html <div ng-app="app">来呼叫，但您的应用名为mainApp。尝试将<div ng-app="app">更改为<div ng-app="mainApp">

Answer 2

将以下代码添加到ctrl.js和routing.js

的第一行

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

喝彩！

Angular JS错误：$ injector：nomod模块在路由期间不可用

2 个答案: