CODEWITHSUNDEEP
angularjs
Libin M
Libin M

Reputation: 511

Angular Error: $injector:modulerr Module Error

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!

Upvotes: 1

Views: 84

Answers (2)

Anshuman
Anshuman

Reputation: 587

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.

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222720

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>

Upvotes: 2

Related Questions