Cannot write a basic controller AngularJS

Question

Forgive me if my question is too basic. I am learning AngularJS's controllers.

This is the project structure.

This is my html:

<!doctype html>
<html ng-app>

<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="js/controllers.js" />
</head>

<body>

<div ng-controller="numberController">
<input type = "text" ng-model = "number.number1" placeholder = "Enter a number here">

<input type = "text" ng-model = "number.number2" placeholder = "Enter another number here">
{{number.number1}} + {{number.number2}} = {{number.sumIt()}}

</div>
</body>
</html>

This is my controller:

function numberController($scope) {
    $scope.number = {
        number1: 0,
        number2: 0,

        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) + parseInt(numberObject.number2);
        }
    };
}

The web page doesn't even load.

Where have I gone wrong?

Edit:

The error that I get: I get this error: https://docs.angularjs.org/error/$injector/modulerr?p0=sa-app&p1=Error:%20%5B$injector:nomod%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.3%2F$injector%2Fnomod%3Fp0%3Dsa-app%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:6:416%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:21:366%0A%20%20%20%20at%20a%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:21:7)%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:21:250%0A%20%20%20%20at%20https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:35:105%0A%20%20%20%20at%20r%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:7:302)%0A%20%20%20%20at%20g%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:34:456)%0A%20%20%20%20at%20Lb%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:38:184)%0A%20%20%20%20at%20d%20(https:%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.3%2Fangular.min.js:17:381

My updated controller:

var saApp = angular.module("saApp", []);

saApp.controller('numberController', function($scope) {
    $scope.number = {
        number1: 0,
        number2: 0,
        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) +      parseInt(numberObject.number2);
        }
    };
});

My updated HTML:

<!doctype html>
<html>

<head>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    <script src="js/controllers.js" />
</head>

<body>

<div ng-app = "saApp" ng-controller="numberController">
<input type = "text" ng-model = "number.number1" placeholder = "Enter a number here">

<input type = "text" ng-model = "number.number2" placeholder = "Enter another number here">
{{number.number1}} + {{number.number2}} = {{number.sumIt()}}

</div>
</body>
</html>

you need the ng-app... the controller has to be part of an ng-app — Mhand7
– Mhand7, Commented Feb 25, 2016 at 11:12

Mhand7 · Accepted Answer · 2016-02-25 11:58:21Z

3

You need to link your application with your JS file first. Change your tag to And change your controllers.js

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.number = {
        number1: 0,
        number2: 0,
        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) +      parseInt(numberObject.number2);
        }
    };
});
</script>

Also the console is found if you right click on your mouse then click on Inspect element.

edited Feb 25, 2016 at 11:58

Mhand7

5371 gold badge3 silver badges21 bronze badges

answered Feb 25, 2016 at 11:25

twitch

2251 silver badge13 bronze badges

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

2 Comments

Sandah Aung Over a year ago

I have updated it. (See my updated question.) But it still doesn't work.

twitch Over a year ago

Try clearing your cache or just run it in Incognito mode. If it still does not work maybe it need a server try running it with XAMP/WAMP etc

Ankit Kumar · Accepted Answer · 2016-02-25 11:42:27Z

Hi Write your program like this:-

<!doctype html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
 angular.module("myapp", [])
    .controller("NumberController", function($scope, $http) {
       $scope.number = {
        number1: 0,
        number2: 0,
        sum:0,
        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            this.sum = parseInt(numberObject.number1) + parseInt(numberObject.number2);
        }
    };
    } );
</script>
</head>
<body ng-app="myapp"> 
<div ng-controller="NumberController">
<input type = "text" ng-model = "number.number1" placeholder = "Enter a number here"/>

<input type = "text" ng-model = "number.number2" placeholder = "Enter another number here"/>
<input type = "button" ng-click="number.sumIt()" value="Sum"/>
sum is {{number.sum}}

</div>
</body>
</html>

Benjamin Downs · Accepted Answer · 2016-02-25 11:44:34Z

1

The problem: you are using a deprecated method of controller declaration. As of at least version 1.3 you can't declare a controller with function <controller>.

The solution:

1: declare the app – var app = angular.module('myApp', []);

2: attach the controller

app.controller('numberController', ['$scope', function($scope) {

$scope.number = {
        number1: 0,
        number2: 0,

        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) + parseInt(numberObject.number2);
        }
    };
}]);

I've made a jsfiddle to demonstrate.

edited Feb 25, 2016 at 11:44

answered Feb 25, 2016 at 11:37

Benjamin Downs

641 silver badge5 bronze badges

Comments

Divyesh Savaliya · Accepted Answer · 2016-02-25 11:34:10Z

0

You have to define angular.module

<html ng-app="myApp">

Then write your controller like below

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

myApp.controller('numberController', ['$scope', function($scope) {
   //Your controller code here
}]);

You can check working codepen Here

Useful link here
1 . Angular docs
2 . TutorialsPoint angular js

edited Feb 25, 2016 at 11:34

answered Feb 25, 2016 at 11:20

Divyesh Savaliya

2,7403 gold badges20 silver badges38 bronze badges

2 Comments

Divyesh Savaliya Over a year ago

you can also check the link

Sandah Aung Over a year ago

I can get it to work if I move the script to the script tags inside the html file. I have no idea why this is the case.

pdorgambide · Accepted Answer · 2016-02-25 11:34:14Z

With your code is not clear that you define the app module. From angular doc

// app.js
    (function(angular) {
        angular.module('ngAppDemo', []).controller('NumberController', function($scope){
            $scope.number = {
                number1: 0,
                number2: 0,

                sumIt: function() {
                    var numberObject;
                    numberObject = $scope.number;
                    return parseInt(numberObject.number1) + parseInt(numberObject.number2);
                }
            };
        });
    })(window.angular);

Notice that you are not using the naming convention for angular controllers, the controller name starts with upper case and the js function starts with lower case ( function numberController() - ng-controller="NumberController")

Finally insert ng-app on html or body, and controller on div

<body ng-app="ngAppDemo">
    <div ng-controller="numberController">

Suresh B · Accepted Answer · 2016-02-25 11:35:35Z

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

myApp.controller('numberqcontroller',  function($scope) {
   //$scope.number ={};
  $scope.number = {
        number1: 10,
        number2: 0,

        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) + parseInt(numberObject.number2);
        }
    };
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html >

<head>
   
</head>

<body ng-app="myApp">

<div ng-controller="numberqcontroller">
<input type = "text" ng-model = "number.number1" placeholder = "Enter a number here">

<input type = "text" ng-model = "number.number2" placeholder = "Enter another number here">
{{number.number1}} + {{number.number2}} = {{number.sumIt()}}


</div>
</body>
</html>

Raghvendra Kumar · Accepted Answer · 2016-02-25 11:53:18Z

I modified your code and it works with the same directory structure. Here's the js file :

var app = angular.module('myApp', []);
app.controller('numberController', function($scope) {

        $scope.number = {
        number1: 0,
        number2: 0,

        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) + parseInt(numberObject.number2);
        }
    }; 

});

and the html :

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

   <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
   <script src="js/controllers.js" > </script>

<body>
    <div ng-controller="numberController">

       <input type = "text" ng-model = "number.number1" placeholder = "Enter a number here">

       <input type = "text" ng-model = "number.number2" placeholder = "Enter another number here">

        {{number.number1}} + {{number.number2}} = {{number.sumIt()}}

    </div>

</body>
</html>

Almar · Accepted Answer · 2016-02-25 12:14:08Z

How about this:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <div ng-controller="numberController as ctrl">
    <input type="number" ng-model="ctrl.number1" placeholder="Enter a number here">
    <br>
    <input type="number" ng-model="ctrl.number2" placeholder = "Enter another number here">
    <br>
    <div ng-if="ctrl.number1 && ctrl.number2">
      {{ctrl.number1}} + {{ctrl.number2}} = {{ctrl.sum(ctrl.number1, ctrl.number2)}}
    </div>
  </div>

</body>
</html>

With Javascript:

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

myApp.controller('numberController', function() {
  var vm = this;
  vm.number1 = null;
  vm.number2 = null;
  vm.sum = function(num1, num2) {
    return num1 + num2;
  };
});

JS Bin example

It's advised to use the 'controller as' construction. you should also consider using a directive (or component if you can upgrade to AngularJs 1.5) instead of using ng-controller.

Ajay Yadav · Accepted Answer · 2016-02-25 12:22:10Z

Just do this in your controller

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

app.controller('numberController', function($scope) {
    $scope.number = {
        number1 : 0,
        number2 : 0,
        sumIt : function() {
            //no need to copy $scope.number to another variable just simply use like this
            return parseInt($scope.number.number1) + parseInt($scope.number.number2);
        }
    }
});

And here is html code

<body  ng-app="myapp">
    <div ng-controller="numberController">
    <input type = "text" ng-model = "number.number1" placeholder = "Enter a number here"/>
    <br /><br />
    <input type = "text" ng-model = "number.number2" placeholder = "Enter another number here"/>
    <br /><br />
     <!-  {{number.number1}} + {{number.number2}} = {{number.sumIt()}}  no need to do this just simply call the sumIt function like below->
     Total = {{number.sumIt()}}
    </div>
</body>

The finally the output

Output

Collectives™ on Stack Overflow

Cannot write a basic controller AngularJS

9 Answers 9

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related