CODEWITHSUNDEEP
javascriptangularjsnode.js
Muhammad Safi
Muhammad Safi

Reputation: 383

Why is this code using angular JS giving injector module error for ngRoute?

Here's the app.js code. I have defined two controllers and a simple routing mechanism using ngRoute. I cannot for the life of me understand why i keep getting the injector module error on ngRoute. I am serving this code using a Node server. Note, the home.html and forecast.html files are completely empty so far.

Please help !

Thanks 

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

myApp.controller('homeController',['$scope',
    function($scope) {
       
    }]);


myApp.controller('forecastController',['$scope',
    function($scope) {


    }]);


myApp.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl:'home.html',
        controller:'homeController'

    }).
    when('/forecast', {
        templateUrl: 'forecast.html',
        controller: 'forecastController'
    });
});
EMPTY
<!DOCTYPE html>
<html ng-app = "myApp">
<head>
    <title>Learning Angular JS</title>
    <!-- Latest compiled and minified CSS -->
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular.min.js"></script>
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular-messages.min.js"></script>
    <script src = "https://code.angularjs.org/1.3.0-rc.5/angular-resource.min.js"></script>
    <script src="https://code.angularjs.org/1.3.0-rc.5/angular-route.js"></script>
    <script src ="app.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="/"> Weather </a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#home">Home</a></li>
                <li><a href = "#forecast"></a> Forecast </li>
            </ul>
        </div>
    </nav>
    <div class="container">

        <div ng-view></div>
    </div>
</body>
</html>

Here is the error link.

angular.js:4068Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.0-rc.5/$injector/modulerr?p0=weatherApp&p1=…20(https%3A%2F%2Fcode.angularjs.org%2F1.3.0-rc.5%2Fangular.min.js%3A18%3A3)

Upvotes: 0

Views: 374

Answers (2)

charlietfl
charlietfl

Reputation: 171698

The problem is with ngResource because there is extra space in the name in your dependency array before closing quote.

Note that if you use angular development version you get a more verbose error output and stack trace in console instead of links to angular error site

var myApp = angular.module("myApp",['ngRoute','ngResource ']);
                                           //remove this ^^

Several other things to note is if you include jQuery before angular then angular.element (jQlite) will use full jQuery API internally but not if you include it after.

Also suggest removing protocol from scripts to avoid blocked content problems when browsers go to load them on http

As for bootstrap.js it is best to remove it and use angular-ui-bootstrap instead. This will also remove jQuery dependency of bootstrap.js

Upvotes: 1

Tirthraj Barot
Tirthraj Barot

Reputation: 2679

Your code is correct But the only thing that was not suppose to be written was the empty space after ngResource. Here is your app.js

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

myApp.controller('homeController',['$scope',
    function($scope) {

    }]);


myApp.controller('forecastController',['$scope',
    function($scope) {


    }]);


myApp.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl:'home.html',
        controller:'homeController'

    }).
    when('/forecast', {
        templateUrl: 'forecast.html',
        controller: 'forecastController'
    });
});

Upvotes: 0

Related Questions