Question

您好我正在尝试使用角度路由。然而它抛出了错误 错误：$ injector：modulerr 模块错误

当我加载页面时，没有任何反应，我希望它从相应的HTML文件中加载内容。

的index.html

<!doctype html>
<html ng-app="nepharia">
<head>
    <title>Nepharia</title>
    <meta charset='utf8' />
    <link rel='stylesheet' href='/css/style.min.css' />
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Montserrat:400,700|Open+Sans:300italic,300,400,400italic,600,600italic,700,700italic,800,800italic' />
    <link rel='stylesheet' href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="icon" href="/favicon.ico">
    <base href="/">
</head>
<body>
    <nav class="TopMenu">
        <ul>

            <li class="logo"><a href="/">CinemaDesign</a></li>

            <li ng-class="getClass('/latest')"><a href="/latest">Latest movies</a></li>

            <li ng-class="getClass('/upcoming')"><a href="/upcoming">Upcoming movies</a></li>

            <li ng-class="getClass('/order')"><a href="/order">Your order</a></li>

            <li><a href="/info">Info</a></li>

            <li class="login right"><a href="/login"><i class="fa fa-user"></i></a></li>

            <li class="search"><a href="/search"><i class="fa fa-search"></i></a></li>

        </ul>
    </nav>

    <main ng-cloak ng-controller="mainCtrl" class="light"></main>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
    <script src="/js/script.js"></script>
</body>
</html>

的script.js

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

    nepharia.config(function ($routeProvider,$locationProvider, $location) {
        $routeProvider
        .when('/', {
            templateUrl : '/v/typography.html',
            controller  : 'mainCtrl'
        })
        .when('/latest', {
            templateUrl : '/v/latest.html',
            controller  : 'mainCtrl'
        })
        .when('/upcoming', {
            templateUrl : '/v/upcoming.html',
            controller  : 'mainCtrl'
        })
        .when('/order', {
            templateUrl : '/v/order.html',
            controller  : 'mainCtrl'
        }).otherwise({ redirectTo: '/' });
        $locationProvider.html5Mode(true);
    });


    nepharia.controller('mainCtrl', function ($scope) {
        $scope.getClass = function (path) {
            if ($location.path().substr(0, path.length) == path) {
                return "active"
            } else {
                return ""
            }
        }
    });

如果有帮助，您可以在nepharia.net

看到我正在玩的网站

提前致谢！

Error link

Answer 1

$ location服务无法注入配置部分，因为只允许提供者和常量。你可以在运行部分使用它，但无论如何我都没有看到你正在使用它，你可以将它注入控制器，你应该将它注入：

nepharia.controller('mainCtrl', function ($scope, $location) {
    $scope.getClass = function (path) {
        if ($location.path().substr(0, path.length) == path) {
            return "active"
        } else {
            return ""
        }
    }
});

Answer 2

只需在脚本中更改此行：

nepharia.config(function ($routeProvider,$locationProvider, $location) {

要

nepharia.config(function ($routeProvider,$locationProvider) {

应该有所帮助。

以下是有关原因的更多细节：

$ location是一项服务：https://docs.angularjs.org/api/ng/service/ $ location

$ location 服务解析浏览器地址栏中的网址（基于在window.location上）并使URL可用于您的应用。地址栏中URL的更改将反映到 $ location 服务和$ location的更改会反映到浏览器地址栏。

在角度文档中，您将看到以下内容（https://docs.angularjs.org/guide/module，位于“模块加载和依赖关系”）：

模块是配置和运行块的集合   在引导过程中应用于应用程序。在其中   最简单的形式模块由两种集合组成   块：


配置块 - 在提供商注册期间执行   和配置阶段。 只能注入提供者和常量   到配置块。这是为了防止意外实例化   服务完全配置之前的服务。

运行块 - 获取   在创建注射器后执行并用于启动注射器   应用。 只能将实例和常量注入进行运行   块。这是为了防止进一步的系统配置   申请运行时间。

有关提供商的信息 - ＆gt; https://docs.angularjs.org/guide/providers（Bulletpoint：“提供者食谱”）

希望这有助于理解$ location的重点。

角度路径错误：$ injector：modulerr模块错误

2 个答案: