Question

我使用AngularJS制作一个简单的计算器，而对于我的生活，我无法弄清楚如何使它工作。我的任务是将java计算器程序改编为javascript，然后给它一个视图。这是我使用的HTML文件：

<!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>

文件＆＃34; calculator.js＆＃34;创建一个名为Calculator的对象。我试图在我的HTML文件中使用该文件中的方法和变量，但{{calc.val}}没有正确显示。

我可能做了很多可怕的事情，但有人可以帮忙吗？

这里是calculator.js文件：

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

另外，我使用的是AngularJS 1.2。

Answer 1

Angular需要运行一些东西，一旦你知道自己在做什么，就不一定要像我向你描述的那样实现，但是我会试着直截了当地指明一些事情。这页纸。首先，您需要一个app.js文件。

angular.module('myApp', [])

其中myApp是您要为应用程序提供的名称。当您使用Angular（依赖注入）执行更复杂的操作时，数组（[]）会产生影响，但现在忽略它。

然后制作一个controller.js文件。

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

这里我们说的是我们正在制作的控制器是（myApp）的一部分，我们命名控制器（calcController），然后在控制器中声明功能和数据（function($scope)...）。 $scope是控制器向视图（HTML）提供功能和数据所需的内容。控制器是计算器逻辑所在的位置。当您需要从HTML页面访问函数时，必须将它们放在$scope对象上。您现在应该可以在HTML中添加更多内容，以便在页面上实际查看值。

<!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>

现在，{{calc.val}}应该等于我们上面硬编码的值。

我会将所需的逻辑调整到calcController中，以便它包含在Angular自己的应用程序中。

例如，如果您创建一个方法，将输入的值与计算器相加，则必须在控制器中输入类似的内容：

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

然后你必须将它放在HTML中的按钮对象上才能实际调用该函数：

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

我在这里过分简化了一些事情，但希望这可以让你走上正轨。

Answer 2

在开始使用角度之前，您需要创建一个模块。基本上，您将创建的每个控制器都需要位于模块中。要创建模块，您需要执行以下操作：

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

现在您已经创建了一个模块，您需要在该模块中分配控制器。

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

所以要结合所有，您的代码将如下所示：

<!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>

显然这是一个过于简化的例子。如果你想了解更多信息，我强烈建议你去看看有角度的js。

以下是一些资源，您可以去学习angularjs。

angularsite

codeacademy

egghead

从angularjs中的控制器内的外部文件调用对象方法

2 个答案: