pradeepkumar pradeepkumar - 5 months ago 175
AngularJS Question

Angular JS injector:modulerr

I have just started angular js. It's showing a error mentioned below.It works fine when the js code is placed inside html page itself using script tag, but when placed in external javascript file it's showing the error below. can any one help me out. I have pasting the code here. I am using angularJS one v1.5.7

Error:

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module mainApp due to:
Error: [$injector:nomod] Module 'mainApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.7/$injector/nomod?p0=mainApp
at file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:68:12
at file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:2075:17
at ensure (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:1999:38)
at module (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:2073:14)
at file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:4608:22
at forEach (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:321:20)
at loadModules (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:4592:5)
at createInjector (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:4514:19)
at doBootstrap (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:1751:20)
at bootstrap (file:///D:/Tutorials/AnjularjS/Controllers/lib/angular.js:1772:12)
http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=mainApp&p1=Error%3A…FD%3A%2FTutorials%2FAnjularjS%2FControllers%2Flib%2Fangular.js%3A1772%3A12)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4631forEach @ angular.js:321loadModules @ angular.js:4592createInjector @ angular.js:4514doBootstrap @ angular.js:1751bootstrap @ angular.js:1772angularInit @ angular.js:1657(anonymous function) @ angular.js:31468trigger @ angular.js:3198defaultHandlerWrapper @ angular.js:3488eventHandler @ angular.js:3476


HTML PART:

<html>
<meta charset="UTF-8">
<head>
<title>Angular JS Controller</title>

<script src = "lib/angular.js"></script>
</head>

<body>
<h2>AngularJS Sample Application</h2>

<div ng-app="mainApp" ng-controller="studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>

You are entering: {{student.fullName()}}
</div>
<script src="js/script.js"></script>
<!--
<script>
var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
-->
</body>
</html>


Js:

function initData()
{
console.log("Entered initData:");
ajsController();
}
function ajsController()
{

var mainApp = angular.module("mainApp", []);

mainApp.controller('studentController',function($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",

fullName:function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});

}

Answer

First add app.js file in lib folder

<script src = "lib/app.js"></script>

app.js

var app = angular.module("mainApp", []);

         app.controller('studentController', function($scope) {
            $scope.student = {
               firstName: "Mahesh",
               lastName: "Parashar",

               fullName: function() {
                  var studentObject;
                  studentObject = $scope.student;
                  return studentObject.firstName + " " + studentObject.lastName;
               }
            };
         });

html

<html>
   <meta charset="UTF-8">
   <head>
      <title>Angular JS Controller</title>

      <script src="lib/angular.js"></script>
      <script src="lib/app.js"></script>

   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app="mainApp" ng-controller="studentController">
         Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
         Enter last name: <input type = "text" ng-model = "student.lastName"><br>
         <br>

         You are entering: {{student.fullName()}}
      </div>
</body>
</html>