AngularJS 0x800a139e - JavaScript 运行时错误:[$injector:modulerr]

AngularJS 0x800a139e - JavaScript runtime error: [$injector:modulerr]

本文关键字：injector modulerr AngularJS JavaScript 运行时错误 0x800a139e      更新时间：2023-09-26

我正在尝试使用路由来加载一些使用Angular的视图，但不断收到错误：0x800a139e - JavaScript运行时错误：来自angular.minl.js的[$injector：modulerr]。

我还使用引导模板来运行测试。我的目录结构如下：

assets
  images
  multimedia
css
  bootstrap.min.css
  jumbotron.css
js
  controllers
  directives
  libs
    angular-route.min.js
    angular.min.js
    bootstrap.min.js
    jquery-2.1.0.min.js
  services
app.js
views
  home.html
  categories.html
index.html

这是我的测试HTML：

<!DOCTYPE html>
<html lang="en" data-ng-app="pfcModule">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/jumbotron.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]     -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" role="form">
                <div class="form-group">
                    <input type="text" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-success">Sign in</button>
            </form>
        </div><!--/.navbar-collapse -->
    </div>
</div>
<div data-ng-view></div>
<div class="container">
    <hr>
    <footer>
        <p>&copy; Company 2014</p>
    </footer>
</div> <!-- /container -->
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/libs/jquery-2.1.0.min.js"></script>
<script src="js/libs/bootstrap.min.js"></script>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-route.min.js"></script>
<script src="js/app.js"></script>

这是我在应用程序中的路由提供程序.js。部件存储在名为"视图"的目录中。我还没有控制器，因为我想先测试路由：

var pfcModule = angular.module('pfcModule', []);
pfcModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
    when('/home', { templateUrl: './views/home.html'}).
    when('/categories', { templateUrl: './views/categories.html' }).
    otherwise({ redirectTo: '/home' });
}]);

只需添加ngRoute作为依赖项 

var pfcModule = angular.module('pfcModule', ['ngRoute']);

这是角度文档，其中包含更多详细信息 https://docs.angularjs.org/api/ngRoute/service/$route#example

相关文章：