CODEWITHSUNDEEP
javascriptangularjs
Arturo
Arturo

Reputation: 261

AngularJS ngRoute throwing Uncaught Error: [$injector:modulerr]

Hi i start to use angularjs v1.4.7 and angular-route v1.5.0 to develop a spa.

The structure on in my project is:

- static
-- js
---- libs
------ angular.min.js
------ angular-route.min.js
---- app.js

- web
-- views
----- ... my views ...
-- index.html

Im getting this error in the browser console: 

Uncaught Error: [$injector:modulerr]

My index:

<!DOCTYPE html>

<html ng-app="app">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

    <link rel="stylesheet" href="../static/bootstrap-3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../static/css/app.css" />

    <title>
        JM2
    </title>

    <script type="text/javascript" src="../static/js/libs/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../static/bootstrap-3.3.5/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="../static/js/libs/angular.min.js"></script>
    <script type="text/javascript" src="../static/js/libs/angular-route.min.js"></script>

    <script type="text/javascript" src="../static/js/app.js"></script>
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">

            <div class="navbar-header">
                <button type="button" 
                    class="navbar-toggle collapsed"
                    data-toggle="collapse" 
                    data-target="#navbar"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    JM2
                </a>
            </div>

            <div class="collapse navbar-collapse"
                id="navbar">
                <ul class="nav navbar-nav">
                    <li role="presentation">
                        <a href="#">
                            Home
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#builds">
                            Builds
                        </a>
                    </li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation">
                        <a href="#admin">
                            Admin
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid">
        <div ng-view></div>
    </div>
</body>

</html>

My app.js:

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

app.config(['$routeProvider'], function($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'views/home.html',
        controller: 'homeController'
    })
    .when('/builds', {
        templateUrl: 'views/builds.html',
        controller: 'buildsController'
    })
    .when('/admin', {
        templateUrl: 'views/admin.html',
        controller: 'adminController'
    })
    .otherwise({
        redirectTo: '/'
    });

});

app.controller('homeController', function($scope) {

});

app.controller('buildsController', function($scope) {

});

app.controller('adminController', function($scope) {

});

Why am I having this error? I had read some questions and all you say is the problem of import of angular-route but I have imported.

Thank you very much in advance.

Upvotes: 0

Views: 210

Answers (1)

Tushar
Tushar

Reputation: 87233

The dependencies mentioned are incorrect. You need to pass an array with the name of the dependencies as strings and the function as the last element in array with the dependencies in the same sequence.

Change app.config(['$routeProvider'], function($routeProvider) {

to

app.config(['$routeProvider', function($routeProvider) {
//                          ^          Removed ]

...
...

}]); // <----- Add ] here

Upvotes: 4

Related Questions