Angular Error: $injector:modulerr Module Error

Question

I am new to angular JS and I am trying a simple module and I got this error.

My html looks like this:

  <!DOCTYPE html>
<html >

  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body data-ng-app="Testingng">
    <div data-ng-controller="MainController" ></div>
    <h1>{{message}}</h1>
    <div> First Name: {{person.firstName}}</div>

  </body>

</html>

and JS looks like this

  angular.module('Testingng', []).controller('MainController', ['$scope', function MainController($scope) {
      var person = {

        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;

    };
  }]);

I also tried this JS and it didn't give any error but didn't show the data.

(function() {

  angular
    .module("Testingng", [])
    .controller("MainController", function($scope) {

      var person = {

        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;

    });

})();

Can anyone please tell what I am doing wrong? Thanks in advance!

did you try it without the data-? for example, ng-app="Testingng" instead of data-ng-app="Testingng" — Taylor Ackley
– Taylor Ackley, Commented May 18, 2017 at 18:38

Sajeetharan · Accepted Answer · 2017-05-18 18:42:32Z

There are two issues with your code

(i) Your controller should be,

 .controller('MainController', ['$scope', function($scope) {

(ii) Your div should be closed after printing the variables, Otherwise you cannot access the $scope variables.

<div ng-controller="MainController" >
    <h1>{{message}}</h1>
    <div> First Name: {{person.firstName}}</div>
</div>

DEMO

angular.module('Testingng', [])
.controller('MainController', ['$scope', function($scope) {
      var person = {
        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;
   
  }]);

 <!DOCTYPE html>
<html >
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />  
  </head>
  <body ng-app="Testingng">
    <div ng-controller="MainController" >
    <h1>{{message}}</h1>
    <div> First Name: {{person.firstName}}</div>
  </body>
</html>

Main thing I was doing wrong was closing the </div> early and other than the syntax error you pointed out, I also had an extra ' };' Thanks!!

Anshuman · Accepted Answer · 2017-05-18 18:52:11Z

Try this

angular.module('Testingng', [])
.controller('MainController', ['$scope', function($scope) {
      var person = {
        firstName: "Test",
        lastName: "Test",
        imageSrc: "C:\Users\Test\Downloads\20160604_142346.jpg"

      };

      $scope.message = "Hello Angular";
      $scope.person = person;
   
  }]);

<!DOCTYPE html>
<html >
  <head>
    <script data-require="angular.js@*" data-semver="4.0.0" src="https://code.angularjs.org/latest/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />  
  </head>
  <body ng-app="Testingng">
    <div ng-controller="MainController" >
      <h1>{{message}}</h1>
      <div> First Name: {{person.firstName}}</div>
    </div>
  </body>
</html>

Your div was closed and as such scope variables could not be resolved.

Collectives™ on Stack Overflow

Angular Error: $injector:modulerr Module Error

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related