不能写一个基本的控制器AngularJS [英] Cannot write a basic controller AngularJS

查看：139 发布时间：2016/5/10 19:58:08 javascript angularjs angularjs-controller

本文介绍了不能写一个基本的控制器AngularJS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

原谅我，如果我的问题是太基本。我学习AngularJS的控制器。

这是项目结构。

这是我的html：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用＆GT;＆LT; HEAD＆GT;
    ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js\"></script>
    ＆LT;脚本SRC =JS / controllers.js/＆GT;
＆LT; /头＆GT;＆LT;身体GT;＆LT; DIV NG控制器=numberController＆GT;
＆LT;输入类型=文本NG模型=number.number1占位符=输入一个数字，这里＆GT;＆LT;输入类型=文本NG模型=number.number2占位符=输入另外一个在这里数＆GT;
{{number.number1}} + {{number.number2}} = {{number.sumIt（）}}＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

这是我的控制器：

 函数numberController（$范围）{
    $ scope.number = {
        数字1：0，
        号码2：0，        SUMIT：功能（）{
            VAR numberObject;
            numberObject = $ scope.number;
            返回parseInt函数（numberObject.number1）+ parseInt函数（numberObject.number2）;
        }
    };
}

该网页甚至不负载。

我在哪里出了错？

编辑：

这是我得到的错误：我得到这个错误：的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

我的更新控制器：

  VAR saApp = angular.module（saApp，[]）;saApp.controller（'numberController'，函数（$范围）{
    $ scope.number = {
        数字1：0，
        号码2：0，
        SUMIT：功能（）{
            VAR numberObject;
            numberObject = $ scope.number;
            返回parseInt函数（numberObject.number1）+ parseInt函数（numberObject.number2）;
        }
    };
}）;

我的更新HTML：

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;＆LT; HEAD＆GT;
    ＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js\"></script>
    ＆LT;脚本SRC =JS / controllers.js/＆GT;
＆LT; /头＆GT;＆LT;身体GT;＆LT; DIV NG-应用=saAppNG控制器=numberController＆GT;
＆LT;输入类型=文本NG模型=number.number1占位符=输入一个数字，这里＆GT;＆LT;输入类型=文本NG模型=number.number2占位符=输入另外一个在这里数＆GT;
{{number.number1}} + {{number.number2}} = {{number.sumIt（）}}＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

解决方案

您需要将应用程序与您的JS文件第一个链接。
更改标签
并改变你的controllers.js

 ＆LT;脚本＆GT;
VAR应用= angular.module（'对myApp'，[]）;
app.controller（'myCtrl'，函数（$范围）{
    $ scope.number = {
        数字1：0，
        号码2：0，
        SUMIT：功能（）{
            VAR numberObject;
            numberObject = $ scope.number;
            返回parseInt函数（numberObject.number1）+ parseInt函数（numberObject.number2）;
        }
    };
}）;
＆LT; / SCRIPT＆GT;

另外，控制台发现，如果你右击鼠标，然后点击检查元素。

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

这篇关于不能写一个基本的控制器AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

不能写一个基本的控制器AngularJS [英] Cannot write a basic controller AngularJS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

不能写一个基本的控制器AngularJS [英] Cannot write a basic controller AngularJS

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭