Question

我是Angular的新人，我正在研究控制器。在我的代码中，我设置了一个简单的控制器访问，但是当我尝试在浏览器中运行时，我遇到了一系列错误消息，如下所示：

"Error: [ng:areq] Argument 'personController' is not a function, got undefined

在我的文件中，我有类似的东西：

 <h1>CONTROLLER</h1>
 <div class="row" ng-app="" ng-controller="personController">

    <div class="col-sm-6">

        <div class="form-group">
            <label class="col-md-3">First Name: </label>
            <input type="text" class="form-control" ng-model="firstname" />
        </div>

        <div class="form-group">
            <label class="col-md-3">Last Name: </label>
            <input type="text" class="form-control" ng-model="lastname" />
        </div>

        <div class="form-group">
            <p>Full Name: {{ firstname + ', ' + lastname }}
        </div>

    </div>

</div>
<script type="text/javascript">

    function personController($scope) {
        $scope.firstname = 'Jerielle';
        $scope.lastname = 'Doe';
    }

</script>

但是当我试图声明一个模块时它起作用了：

 <h1>CONTROLLER</h1>
 <div class="row" ng-app="myApp" ng-controller="personController">

    <div class="col-sm-6">

        <div class="form-group">
            <label class="col-md-3">First Name: </label>
            <input type="text" class="form-control" ng-model="firstname" />
        </div>

        <div class="form-group">
            <label class="col-md-3">Last Name: </label>
            <input type="text" class="form-control" ng-model="lastname" />
        </div>

        <div class="form-group">
            <p>Full Name: {{ firstname + ', ' + lastname }}
        </div>

    </div>

</div>
<script type="text/javascript">

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

    myApp.controller('personController', function($scope) {
        $scope.firstname = 'Jerielle';
        $scope.lastname = 'Doe';
    });

</script>

我正在关注w3schools中的教程。

我的问题是我可以创建一个没有创建模块的控制器吗？

Answer 1

您使用的第一个只是控制器的全局函数声明，其中您将控制器声明为函数。要分析Angular，该函数应被视为controller，我们需要将修复后的内容用作Controller。

由于您使用的是Angular 1.3 +版本，默认情况下禁用全局函数声明，因此它无效。无论您需要做什么，只需使用angular.module创建一个模块，然后将组件附加到该模块。

为了让您的代码正常工作，您需要启用角度配置阶段

app.config(['$controllerProvider',
  function($controllerProvider) {
    $controllerProvider.allowGlobals();
  }
]);

注意

虽然您可以使用上面的方法启用此全局声明功能设置使你的第一个代码工作，我不喜欢这样做。使用angular.module可以使您的代码成为区域基础。

以下是解释
的similar answer

Answer 2

您需要创建一个应用程序。对于任何角度组件（控制器，指令，服务等）都是如此。这是因为当你使用一个控制器时，angularhas不仅仅是绑定一个函数，还有一些功能已添加到你的函数中（类似于继承），它将你的控制器添加到摘要周期，范围等。

Answer 3

使用这种方法，即使在缩小后也会更好

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

  myApp.controller('parentController',parentController);

   parentController.$inject = ["$scope"] // inject dependencies 

    function parentController($scope) {

    .....
   }

Answer 4

控制器是模块的一部分。基本上，模块是“创建”您的应用程序的东西，控制器执行您希望它执行的命令，以便您的应用程序按您希望的那样。将它与人体进行比较。模块是躯干，而控制器是手臂。你不能拥有一个有臂的功能性人体，但没有躯干。

如果在Angular中没有声明模块，则函数未定义

4 个答案: