CODEWITHSUNDEEP
javascriptangularjs
Ruben
Ruben

Reputation: 75

Angular route Error: $injector:modulerr Module Error

Hello I am trying to use angular routing. It is however throwing the error Error: $injector:modulerr Module Error

When i load pages nothing happens, where I want it to load the content from the corresponding HTML files.

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

If it helps, you can see the site I am playing with at nepharia.net

Thanks in advance!

Error link

Upvotes: 0

Views: 305

Answers (2)

Fer To
Fer To

Reputation: 1517

Just change this line in your script:

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

To

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

Should help.

And here are some more details about why:

$location is a service : https://docs.angularjs.org/api/ng/service/$location

The $location service parses the URL in the browser address bar (based on the window.location) and makes the URL available to your application. Changes to the URL in the address bar are reflected into $location service and changes to $location are reflected into the browser address bar.

And in the angular docs you will see the following (https://docs.angularjs.org/guide/module , at "Module Loading & Dependencies"):

A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process. In its simplest form the module consist of a collection of two kinds of blocks:

  1. Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
  2. Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.

Information about Providers -> https://docs.angularjs.org/guide/providers (Bulletpoint: "Provider Recipe")

Hope this helps to understand the point with $location.

Upvotes: 0

eladcon
eladcon

Reputation: 5825

The $location service cannot be injected to the config section, as only providers and constants are allowed. You can use it in the run section, but anyway I don't see you are using it, excpet for you controller, which you should inject it into:

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

Upvotes: 1

Related Questions