Calling object methods from an external file within a controller in angularjs

Question

I'm using AngularJS to make a simple calculator, and for the life of me, I cannot figure out how to make it work. My assignment was to adapt a java calculator program to javascript, then give it a view. Here's the HTML file I'm using:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Calculator</title>
<script src="js/angular.min.js"></script>
<script src="js/calculator.js"></script>
<script>
    function CalcController($scope){
        $scope.calc = Calculator;
    }
</script>
</head>
<body ng-controller='CalcController'>
    <p>{{calc.val}}</p>
</body>
</html>

The file "calculator.js" creates an object called Calculator. I'm trying to use the methods and variables from that file in my HTML file, but {{calc.val}} doesn't display correctly.

I'm probably doing a ton of things horribly wrong, but can someone help?

Here's the calculator.js file:

var Calculator = {
    val: 0;
    old: 0;
    op: '=';
    isClean: true;

    process: function(c){
        if(isClear(c)){
            this.val = 0;
            this.old = 0;
            this.op = '=';
            this.isClean = true;
        }
        else if(isDigit(c)){
            var d = evalDigit(c);
            if(this.isClean){
                this.old = this.val;
                this.val = d;
            }
            else{
                this.val = (this.val * 10) + d;
            }
            this.isClean = false;
        }
        else if(isOp(c)){
            var v = evalOp(this.op, this.old, this.val){
                if(!this.isClean){
                    this.old = this.val;
                }
                this.val = v;
                this.op = c;
                this.isClean = true;
            }
        }
    }

    isOp: function(c){
        switch(c){
            case '=' : return true;
            case '+' : return true;
            case '-' : return true;
            case '*' : return true;
        }
        return false;
    }
    evalOp: function(c, m, n){
        switch(c){
            case '=' : return n;
            case '+' : return m + n;
            case '-' : return m - n;
            case '*' : return m * n;
        }
    }
    isDigit: function(c){
        return c >= '0' && c <= '9';
    }
    evalDigit: function(c){
        return c - '0';
    }
    isClear: function(c){
        return c == 'c';
    }
};

Also, I'm using AngularJS 1.2.

depending on the version of angular.js you are using here, you are using a deprecated way of declaring angular. This will not work with angular 1.3 or greater. — Claies
– Claies, Commented Jan 14, 2016 at 2:25

P Ackerman · Accepted Answer · 2016-01-14 02:18:50Z

Angular requires a few things to run that don't necessarily have to be implemented the same way as I will describe to you once you know what you are doing, but I am going to try and give straightforward directions to get something on the page. First you will need an app.js file.

angular.module('myApp', [])

where myApp is the name you want to give your application. The array ([]) is of consequence when you are doing more complex things with Angular (dependency injection), but for now ignore it.

Then make a controller.js file.

angular.module('myApp').controller('calcController', function($scope){ 
    $scope.calc = {val: 1} 
})

Here we are saying what app the controller we are making is a part of (myApp), what we are naming the controller(calcController), and then declaring the functionality and data within the controller (function($scope)...). $scope is what the controller needs to present functionality and data to the view (the HTML). The controller is where the logic for your calculator should live. When you need to access functions from the HTML page, you must put them on the $scope object. You should be able to now add a little more to your HTML to actually see a value on the page.

<!DOCTYPE html>
<html ng-app='myApp'>
<head>
    <title>Calculator</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/calculatorCtrl.js"></script>
</head>
<body ng-controller='calcController'>
    <p>{{calc.val}}</p>
</body>
</html>

Now, {{calc.val}} should equal the value we hardcoded above.

I would adapt what ever logic you need into the calcController so that it is contained within Angular's own sense of the application.

If you create a method, for instance, that sums the values input to the calculator, you would have to put something like this in the controller:

$scope.sum = function(values){
 //sum all values
}

Then you would have to put this on a button object in the HTML to actually invoke that function:

<button ng-click="sum()"></button>

I am oversimplifying things a bit here, but hopefully this can get you on track.

Subash · Accepted Answer · 2016-01-14 02:54:52Z

Before you can start using angular, You will need to create a module. Basically every controller you will create need to be in a module. To create a module you will need to do:

angular.module('myApp', []); 
// creates new module called new app
// empty array as second parameter is where you can add other modules as dependency

Now that you have created a module, you will need to assign your controller in that module.

var calcApp = angular.module('calcApp');
// notice this doesn't have the second parameter. 
// This means we are getting the module we created earlier and assigning it to a variable `calcApp`
calcApp.controller('CalcController', function($scope) {
    $scope.calc = Calculator;
});
// The first parameter of calculator function is the calculator name. 
// and the second is its implementation function 
// Then we assign Calculator to $scope which is available in the controller

So to combine all, your code will look like follows:

<!DOCTYPE html>
<html ng-app>
<head>
    <title>Calculator</title>
<script src="js/angular.min.js"></script>
<script src="js/calculator.js"></script>
<script>
    var calcApp = angular.module('calcApp');
    calcApp.controller('CalcController', function($scope) {
        $scope.calc = Calculator;
    });
</script>
</head>
<body ng-controller='CalcController'>
    <p>{{calc.val}}</p>
</body>
</html>

Obviously this is a overly simplified example. I highly suggest you to go and read about angular js if you want to learn more.

Here are some resources where you can go and learn about angularjs.

angularsite

codeacademy

egghead

Collectives™ on Stack Overflow

Calling object methods from an external file within a controller in angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related