How to use Controllers in AngularJS?

Question

I've got a very basic page with a controller, I think it should be pretty obvious what I'm trying to do from the code, but it isn't working.

Here is my HTML

<!DOCTYPE html>
<html ng-app>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

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

With the following in script.js

var MainController = function($scope) {
     $scope.message = "Hello";
});

The 800 / 40 is displaying 20, so that suggests the Angular script and ng-app is fine, but the value of message isn't being set. In the example the ng-controller is in a h1 tag, but I have also tried it in a div which wraps around the h1.

Any suggestions?

Thanks

You should read the documentation instead of just defining something somehow. — str
– str, Commented Sep 15, 2016 at 9:20

Weedoze · Accepted Answer · 2016-09-15 09:21:41Z

2

You need to create an angular module

var myapp = angular.module('myApp', []);

myapp.controller('MainController', function($scope){
  $scope.message= "Hello";

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<div ng-app="myApp">
    <h1 ng-controller="MainController">{{message}}</h1>
</div>

answered Sep 15, 2016 at 9:21

Weedoze

14k2 gold badges38 silver badges65 bronze badges

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

Comments

Balanjaneyulu K · Accepted Answer · 2016-09-15 09:28:20Z

2

You have to create a Angular module and place that module name for ng-app attribute.

Working solution: https://jsbin.com/nugipinale/1/edit?html,js,output

answered Sep 15, 2016 at 9:28

Balanjaneyulu K

4,4145 gold badges29 silver badges49 bronze badges

Comments

Ranjith Jayaram · Accepted Answer · 2016-09-15 09:22:20Z

1

Define angular controller as

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

answered Sep 15, 2016 at 9:22

Ranjith Jayaram

2993 silver badges13 bronze badges

2 Comments

str Over a year ago

Probably because app is undefined.

Weedoze Over a year ago

Where does your app comes from ?

Maheshvirus · Accepted Answer · 2016-09-15 09:23:28Z

1

   <div ng-app="myApp" ng-controller="MainController">
   <h1>{{ 800 / 40 }} </h1>
  <h1 >{{message}}</h1>
 </div>

<script>
var app = angular.module('myApp', []);
 app.controller('MainController', function($scope) {
  $scope.message = "John";
   });
 </script>

answered Sep 15, 2016 at 9:23

Maheshvirus

7,6312 gold badges45 silver badges46 bronze badges

Comments

Raju Detroja · Accepted Answer · 2016-09-15 11:51:41Z

1

do something like this,

Html code

 <html>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="MainController">
   <h1>{{ 800 / 40 }} </h1>
  <h1 >{{message}}</h1>
 </div>
 </html>

add this in Script file

var app = angular.module('myApp', []);
 app.controller('MainController', function($scope) {
  $scope.message = "John";
   });
 </script>

edited Sep 15, 2016 at 11:51

answered Sep 15, 2016 at 9:26

Raju Detroja

1326 bronze badges

3 Comments

Amit Visodiya Over a year ago

Please try with new

str Over a year ago

@RajuDetroja No it doesn't: Uncaught Error: [$injector:nomod] Module 'myapp' is not available!. You have to use module('myapp', []) to define the module first.

Raju Detroja Over a year ago

Here , i changed and add full code (html and script code)

Collectives™ on Stack Overflow

How to use Controllers in AngularJS?

5 Answers 5

Comments

Comments

2 Comments

Comments

Html code

add this in Script file

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

Html code

add this in Script file

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related