CODEWITHSUNDEEP
angularjs
pradeepkumar
pradeepkumar

Reputation: 3

Angular JS injector:modulerr

I have just started working on angular js. It's showing an error mentioned below.It works fine when the js code is placed inside html page itself using script tag, but when it is placed in external javascript file it's showing error below. Can any one help me out. I have pasted 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;
               }
            };
         });

}

Upvotes: 0

Views: 1520

Answers (2)

Wasiq Muhammad
Wasiq Muhammad

Reputation: 3118

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>

Upvotes: 1

daf
daf

Reputation: 1329

You've put your module creation code inside the function ajsController, called from initData, but I don't see you calling initData() anywhere?

Upvotes: 0

Related Questions