Not able to read data from Controller in Angular JS

Question

can anyone point the mistake as to why i am unable to read the data from the controller ?

Link to plunker

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />

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

  </head>

  <body ng-controller="MainController">
    <h1> {{ message }} </h1>
  </body>

</html>

// Code goes here

// Code goes here

var MainController = function($scope) {

  $scope.message = "Hello";
};

Whats the message you are getting in console log of browser ? — Shashank Vivek
– Shashank Vivek, Commented Apr 14, 2018 at 10:19

Shashank Vivek · Accepted Answer · 2018-04-14 10:45:01Z

2

Where is the ng-app name ? Provide module name.

angular.module('myApp',[])
    .controller('SomeCtrl',function($scope){ .. your code ...})

Provide it in .html file

<html ng-app="myApp">

Fixed your Plunkr

You are referring to older version of AngularJS for learning and using 1.5 in plunkr. Check the below link

For your app, refer

edited Apr 14, 2018 at 10:45

answered Apr 14, 2018 at 10:19

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

10 Comments

Pale Blue Dot Over a year ago

i don't think thats necessary .Anyway i gave ng-app="Test".But it still doesnt work

Shashank Vivek Over a year ago

@RahulRaj: Not necessary? Share your console log

Pale Blue Dot Over a year ago

is it due to old version ? Uncaught Error: [$injector:modulerr] Failed to instantiate module Test due to: Error: [$injector:nomod] Module 'Test' 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.

Pale Blue Dot Over a year ago

why module i am learnimng from pluralsight video and i copied the same code.There was no mention of concept module

Shashank Vivek Over a year ago

@RahulRaj : Check the plunkr in my answer

|

Sravan · Accepted Answer · 2018-04-14 10:49:31Z

While your code may be correct, but it is prior to the versions 1.3.0

Versions Before 1.3.0:

Prior to 1.3.0, angular was able to automatically discover controllers that were defined globally.

Check Below I have created without module

<div ng-app>
   <div ng-controller="MainController">
       {{message}}
   </div>
</div>

The code can be:

var MainController = function($scope) {

  $scope.message = "Hello";
};

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.32/angular.js"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
  </head>

  <body ng-controller="MainController">
    <h1>{{message}} </h1>
  </body>

</html>

Plunker version prior to 1.3.0

Versions After 1.3.0:

You can use $controllerProvider.allowGlobals() to enable that behaviour.

allowGlobals allows $controller to find controller constructors on window

angular.module("ng").config(function($controllerProvider){
  $controllerProvider.allowGlobals();
});

var MainController = function($scope) {

  $scope.message = "Hello";
};

<!DOCTYPE html>
<html ng-app>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="script.js"></script>
    <script type="text/javascript">
      function MyController() {}
    </script>
  </head>

    <body ng-controller="MainController">
    <h1>{{message}} </h1>
  </body>
  
</html>

Plunker with versions after 1.3.0

Note: I personally recommend to use the latest versions with modules and ng-app="app" format.

angular.module('myApp',[])
    .controller('MainController',function($scope){ .. your code ...})

@Rahul Raj, I mentioned why it is not working and also gave the solution to how to make it work using your syntax after version 1.3.0

Gaurav Sharma · Accepted Answer · 2018-04-14 10:25:53Z

0

Here you go!!

 <!DOCTYPE html>
    <html ng-app="app">

      <head>
    <script data-require="angular.js.1.3@*" data-semver="1.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"></script>
    <script data-require="angular-route@*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
    <link rel="stylesheet" href="style.css" />

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

  </head>

  <body ng-controller="MainController">
    <h1> {{ message }} </h1>
  </body>

</html>

// Code goes here

script.js

angular.module('app',[]).controller('MainController',function MainController($scope) {
  $scope.message = "Hello";
})

answered Apr 14, 2018 at 10:25

Gaurav Sharma

4217 silver badges23 bronze badges

Collectives™ on Stack Overflow

Not able to read data from Controller in Angular JS

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related