AngularJS 错误：[$injector:modulerr]答案

【问题标题】：AngularJS Error: [$injector:modulerr]AngularJS 错误：[$injector:modulerr]
【发布时间】：2016-08-13 11:06:25
【问题描述】：

我在浏览器中收到此错误“

错误：[$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector>/modulerr?

我的脚本 app.js

    var sampleApp = angular.module('myApp',[]).config(function($routeProvider){
    $routeProvider.
        when('/AddNewOrder',{
             templateUrl:'view/add_order.html',
             controller:'addOrderController'
    }).
        when('/ShowOrders',{
            templateUrl:'view/show_order.html',
             controller:'addOrderController'
    }).
            otherwise({redirectTo:'/AddNewOrder'
    });
});


`SampleApp.controller('myCtrl',function($scope,$location){
       $scope.setRoute = function(route){
           $location.path(route);
});`

而HTML代码是

    <!DOCTYPE html>
<html lang="en" data-ng-app="myApp">
  <head>

    <title>AngularJS Routing example</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
          padding-top: 10px;
          background-color: #F5F5F5;
        }
    </style>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="../../assets/js/html5shiv.js"></script>
      <script src="../../assets/js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body data-ng-controller="myCtrl">

    <div class="container">
        <div class="row">
        <div class="col-md-3">
           <ul class="nav">
                <li><a data-ng-click="setRoute('AddNewOrder')"> Add New Order </a></li>
                <li><a data-ng-click="setRoute('ShowOrders')"> Show Order </a></li>
            </ul>
        </div>
        <div class="col-md-9">
            <div data-ng-view></div>
        </div>

        </div>

    </div><!-- /.container -->

    <script src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/route.min.js"></script>
    <script src="app.js"></script>

  </body>
</html>

不知道为什么会出现此错误。需要您的建议来解决这个问题。

【问题讨论】：

标签： angularjs

【解决方案1】：

更新

我查看了您的堆栈跟踪，您似乎是直接从文件夹路径加载 JavaScript 文件，它使用file 协议要求文件。要解决这个问题，您必须在 IIS、Lamp、Wamp 等（任何服务器）等服务器上托管文件/文件夹，然后从托管链接（http://localhost:8080/index.html）访问 html

虽然如果您不想托管文件，您可以启用直接文件访问，您可以参考 [this answer]( How to launch html using Chrome at "--allow-file-access-from-files" mode?)

您应该在myApp 模块中注入ngRoute 模块，因为路由API 没有提供开箱即用的angular.js。它一直存在于angular-route.js 中，并将其 API 保存在ngRoute 模块中。基本上，每当您想使用路由 API 时，您都应该在您的应用程序模块中注入 ngRoute。我要确定的另一件事是，angular-route-min.js（我猜你通过重命名将它放在js/route.min.js 中）是否正确加载。

var sampleApp = angular.module('myApp',['ngRoute'])

【讨论】：

请解释原因让他知道。
@MrJSingh 感谢提醒，我更新了答案:)
@PankajParkar 我通过“myApp”模块注入了“ngRoute”，但我再次遇到同样的错误。
你检查过页面上加载的 angular-route.min.js 吗？
我是 angularJS 的新手。你能告诉我如何检查它吗