找不到未加载 ngRoute 的原因：模块 'ngRoute' 不可用

Question

伙计们。

我知道这个错误很老了，我已经找到了很多关于这个问题的答案，但我仍然找不到解决方法。

我收到以下错误消息：

angular.js:68 未捕获错误：[$injector:modulerr] 由于以下原因无法实例化模块 myApp：错误：[$injector:modulerr] 由于以下原因无法实例化模块 ngRoute：错误：[$injector:nomod] 模块 'ngRoute' 不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

Index.html

<!DOCTYPE html>

<html lang="en" ng-app="myApp" >
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
        <script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <title>My test Website</title>
        <meta name="author" content="me">
    </head>

    <body ng-controller="ContentController">
        <ul class="main-nav" id="main-nav">
            <li><a href="#/"><i class="fa fa-home"></i>Home</li>
            <li><a href="#nothing"><i class="fa fa-comment"></i>Portfolio</li>
            <li><a href="#nothing"><i class="fa fa-comment"></i>Articles</li>
            <li><a href="#nothing"><i class="fa fa-comment"></i>Books</li>
        <li><a href="#about"><i class="fa fa-shield"></i>About Me</li>
        </ul>
        <p>Nothing here {{ 1 + 2}}</p>

        <ng-view></ng-view>
    </body>


</html>

App.js

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


    websiteApp.config(  function($routeProvider) {
    $routeProvider
        .when('/main', {
            templateUrl: '/views/main.html',
            controller: 'MainController'
        })
        .when('/about', {
            templateUrl: '/views/about.html',
            controller: 'AboutController'
        })
        .otherwise({
            redirectTo: '/'
        });
    });

    websiteApp.controller('ContentController', function ($scope) {
        console.log("content controller loaded");
    });

    websiteApp.controller('MainController', function ($scope) {
        console.log("main loaded");
    });

    websiteApp.controller('AboutController', function ($scope) {
        console.log("about loaded");
    });

我知道我可能遗漏了一个非常简单的细节，但我已经仔细检查了堆栈溢出相关问题的所有答案，但我找不到解决这个问题的方法。

我相信准备 fiddle 对你没有帮助，因为问题似乎与对 angular-route 的引用有关。

此外，我已经在我的浏览器上禁用了缓存。

你能帮帮我吗？

谢谢！

Answer 1

你在这一行有拼写错误

<script type="text/javascript" scr="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>

它不应该 br scr 但 src

Answer 2

您应该将您的脚本标签更新为

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>

此外，还有一种更好的推荐方法可以在 config 文件中声明您的配置。此技术可确保您的代码与 Angular 的准则保持一致。

websiteApp.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $routeProvider
        .when('/main', {
            templateUrl: '/views/main.html',
            controller: 'MainController'
        })
        .when('/about', {
            templateUrl: '/views/about.html',
            controller: 'AboutController'
        }])
        .otherwise({
            redirectTo: '/'
        });
    });

希望对您有所帮助。

找不到未加载 ngRoute 的原因：模块 'ngRoute' 不可用

Cannot find why ngRoute is not loaded: Module 'ngRoute' is not available

angularjs

ngroute