Question

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

我也在使用bootstrap模板来运行测试。我的目录结构如下：

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

Answer 1

只需添加ngRoute作为依赖

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

以下是包含更多详情https://docs.angularjs.org/api/ngRoute/service/ $ route＃example

的角度文档

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

1 个答案: