Issue - AngularJS Uncaught Error: [$injector:modulerr]

Question

Am completely new to AngularJS. So am trying the flow of sample application before I start the development of a new app in my project. Below is what I have tried.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.js"></script>
<script type="text/javascript" src = "js/app.js"></script>
</head>
<body>
    <h1>Student Registration!</h1>
    <div ng-view></div>
</body>
</html>

registerStudent.html

<table>
<tr>
    <td><input type="button" value="Save" ng-click="save()"></td>
    <td>{{message}}</td>
</tr>
</table>

app.js

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

/**routing*/
app.config(['$routeProvider', function($routeProvider){

$routeProvider.when('/editStudent', {
    templateUrl:'html/editStudent.html',
    controller:'studentReg'
});

$routeProvider.when('/viewStudent', {
    templateUrl:'html/viewStudent.html',
    controller:'studentReg'
});

$routeProvider.when('/registerStudent', {
    templateUrl:'html/registerStudent.html',
    controller:'studentReg'
});

$routeProvider.otherwise({
    redirectTo: '/registerStudent'
});
}]);

services.js

var app = angular.module('app.services', []);
app.service('restService', function(){
    this.save=function(){
    return 'saved';
    };
});

controller.js

var app = angular.module('app.controllers', []);
app.controller('studentReg', function($scope, restService){
$scope.result=restService.save();
    $scope.save=function(){
        console.log($scope.result);
        $scope.message=$scope.result;
    };
});

When I tried to run the application, I got the below error.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=app&p1=Error%3…2Flocalhost%3A8080%2FEnhancedStudentform%2Flib%2Fangular.min.js%3A20%3A421)

EnhancedStudentform is the name of the application. localhost:8080/EnhancedStudentform is the URL am using to call the application. — Kaushi
– Kaushi, Commented Feb 26, 2016 at 7:37
Failed to instantiate module app due to: Error: [$injector:modulerr] errors.angularjs.org/1.5.0-rc.1/$injector/modulerr...). this is the error which is coming in the error — Kaushi
– Kaushi, Commented Feb 26, 2016 at 7:40

Noshii · Accepted Answer · 2016-02-26 07:44:49Z

2

You forget to load your controller.js and services.js, that's my guess. Try this after you include you app.js in index.html:

<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>

answered Feb 26, 2016 at 7:44

Noshii

4864 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noshii Over a year ago

This should really fix it, try to clear you cache and restart your webserver. Do you get the exact same error? Update your answer otherwise, so we can see the new error.

Kaushi Over a year ago

hey @Noshii ya its fixed after clearing cache and restarting the server.

Mahantesh Kumbar · Accepted Answer · 2016-02-26 07:44:26Z

1

Try to Include all js files in you index html like:

<script type="text/javascript" src = "js/app.js"></script>
<script type="text/javascript" src = "js/controller.js"></script>
<script type="text/javascript" src = "js/services.js"></script>

answered Feb 26, 2016 at 7:44

Mahantesh Kumbar

2551 silver badge10 bronze badges

Collectives™ on Stack Overflow

Issue - AngularJS Uncaught Error: [$injector:modulerr]

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related