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

【问题标题】：AngularJS 0x800a139e - JavaScript runtime error: [$injector:modulerr]AngularJS 0x800a139e - JavaScript 运行时错误：[$injector:modulerr]
【发布时间】：2014-11-26 04:54:58
【问题描述】：

我正在尝试使用路由来使用 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>

这是我在 app.js 中的路由提供程序。部分存储在名为“views”的目录中。我还没有任何控制器，因为我想先测试路由：

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' });
}]);

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

只需添加 ngRoute 作为依赖项

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

这里是更多详细信息的角度文档https://docs.angularjs.org/api/ngRoute/service/$route#example

【讨论】：

谢谢，依赖让我想起了很多 requireJS。我来自骨干世界，所以我有很多东西要学！