Question

如果我的问题太基础，请原谅我。我正在学习AngularJS的控制器。

这是项目结构。

这是我的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>

这是我的控制者：

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

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

网页甚至无法加载。

我哪里出错？

编辑：

我得到的错误：我收到此错误：https://docs.angularjs.org/error/ $ injector / modulerr？p0 = sa-app＆amp; p1 =错误：％20％5B $ injector：nomod％5D％20http：％2F％ 2Ferrors.angularjs.org％2F1.3.3％2F $注射器％2Fnomod％3Fp0％3Dsa应用内％0A％20％20％20％20原子％20Error％20（天然）％0A％20％20％20％20原子％20https ：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular.min.js：6：416％0A％20％20％20％20个原子％20https：％2F％2Fajax.googleapis.com ％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular.min.js：21：366％0A％20％20％20％20原子％20A 20％（HTTPS：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％ 2Fangularjs％2F1.3.3％2Fangular.min.js：21：7）％0A％20％20％20％20个原子％20https：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular。 min.js：21：250％0A％20％20％20％20个原子％20https：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular.min.js：35：105％0A ％20％20％20％20原子％20R％20（HTTPS：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular.min.js：7：302）％0A％20％20 ％20％20原子％20克％20（HTTPS：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular.min.js：34：4 56）％0A％20％20％20％20原子％20磅20％（HTTPS：％2F％2Fajax.googleapis.com％2Fajax％2Flibs％2Fangularjs％2F1.3.3％2Fangular.min.js：38：184）％0A ％20％20％20％20原子％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', function($scope) {
    $scope.number = {
        number1: 0,
        number2: 0,
        sumIt: function() {
            var numberObject;
            numberObject = $scope.number;
            return parseInt(numberObject.number1) +      parseInt(numberObject.number2);
        }
    };
});

我更新的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>

Answer 1

您需要先将应用程序与JS文件链接起来。将您的代码更改为并更改您的controllers.js

var myApp = angular.module('angularjs', []);    
myApp.controller('GreetingController', ['$scope', function ($scope) {
   $scope.greeting = 'Hola!';
}]);

如果右键单击鼠标然后单击Inspect element，则会找到控制台。

Answer 2

你好这样写你的程序： -

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

Answer 3

问题：您正在使用已弃用的控制器声明方法。从版本1.3开始，您无法使用function <controller>声明控制器。

解决方案：

1 ：声明应用 - var app = angular.module('myApp', []);

2 ：附加控制器

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);
        }
    };
}]);

我做了jsfiddle to demonstrate.

Answer 4

您必须定义angular.module

<html ng-app="myApp">

然后编写如下控制器

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

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

您可以查看工作代码集Here

这里有用的链接
     1 . Angular docs
     2 . TutorialsPoint angular js

Answer 5

您的代码不明确，您定义了应用程序模块。来自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);

请注意，您没有使用角度控制器的命名约定，控制器名称以大写字母开头，而js函数以小写字母开头（函数numberController（） - ng-controller =＆＃34; NumberController＆＃34;）

最后在html或body上插入ng-app，在div上插入控制器

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

Answer 6

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>

Answer 7

我修改了你的代码，它使用相同的目录结构。这是js文件：

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

});

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

Answer 8

这个怎么样：

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

使用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

建议使用'controller as'构造。您还应考虑使用指令（或组件，如果您可以升级到AngularJs 1.5）而不是使用ng-controller。

Answer 9

在控制器中执行此操作

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

这是html代码

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

最后输出

https://github.com/ColinEberhardt/ReactiveTwitterSearch/blob/master/ReactiveTwitterSearch/Util/UIKitExtensions.swift

无法编写基本控制器AngularJS

9 个答案: