CODEWITHSUNDEEP
angularjs
Pale Blue Dot
Pale Blue Dot

Reputation: 67

Not able to read data from Controller in Angular JS

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

Link to plunker

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";
};

Upvotes: 1

Views: 82

Answers (3)

Sravan
Sravan

Reputation: 18647

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 ...})

Upvotes: 1

Shashank Vivek
Shashank Vivek

Reputation: 17494

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

  1. this link
  2. and this one too

Upvotes: 2

Gaurav Sharma
Gaurav Sharma

Reputation: 421

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";
})

Upvotes: 0

Related Questions