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");
    });

我知道我可能错过了一个非常简单的细节，但我已经仔细检查了堆栈溢出相关问题的所有答案，我不知道如何解决这个问题。

我相信准备一个小提琴不会帮助你，因为问题似乎与角度路线的参考有关。

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

你能帮帮我吗？

谢谢！

Answer 1

你在这一行有拼写错误

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

它不应该是 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'不可用

2 个答案: