我正在努力理解AngularJS's控制器的语法

I am trying to understand AngularJS's controllerAs syntax

本文关键字：控制器 语法 AngularJS 努力      更新时间：2023-10-13

然而，在写了几个例子之后，控制器将无法加载。我得到了一个错误：

firstController is not a function

经过一些谷歌搜索，我发现Angular 1.3.x不再支持全局控制器。我看到的所有创建控制器的新方法的例子似乎都是在我的app.js文件中创建的。我很困惑，这是否意味着我必须在这里创建所有的控制器，而不是为每个控制器创建一个专用文件。我已经尝试过创建控制器，但仍然没有运气：

更新：我更改了我的控制器以匹配jedanput的答案，但将$scope更改为这个。

app.controller('firstController', [function(){
 this.name = "Tim";

}])；

此外，我觉得很烦人的是，大多数例子仍然引用了Angular 1.2中的方法。任何帮助都将不胜感激，因为我很难理解这个问题。

编辑：这是我的index.html文件。希望这能帮助你们理解出了什么问题。

<!DOCTYPE html>
<html lang="en"  xmlns:ng="http://angularjs.org" id="ng-app"       ng-app="myApp">
<head >
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>ControllerAs</title>
    <meta name="description" content="">
</head>
<body>

<div class="content" ng-view=""></div>
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- AngularJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular-route.js"></script>
<script type="text/javascript" src="../js/app.js"></script>
<!--Directives-->
<script type="text/javascript" src="../js/directives/it-works.js">    </script>
<!--Controllers-->
    <script type="text/javascript" src="../js/controllers/firstController.js"></script>
    <script type="text/javascript" src="../js/controllers/secondController.js"></script>


</body>
</html>

到目前为止，我一直在回避控制器，因为我所做的一切都可以通过指令和服务来完成，但现在是时候让我更多地了解控制器了。我想这可能是我缺少的一些基本的东西。再次感谢您的帮助。

更新：仍然得到相同的错误。这是我的app.js文件。也许它可以揭示这个问题。

var app = angular.module('myApp',[
'ngRoute'

]);
app.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: "../partials/test-skeleton.html"

})
});

应该是

app.controller('firstController', ['$scope', function($scope){
     $scope.name = "Tim";
}]);

此外，controllerAs语法是合成糖的作用域，简单地说，您可以避免使用以下内容：

<div ng-controller="oneCtrl">
    {{name}}
</div>

相反，使用这个：

<div ng-controller="oneCtrl as one">
    {{one.name}}
</div>

当你有嵌套的控制器时，这会非常有帮助。

你是对的，Angular允许多种不同的符号，这可能会令人讨厌和困惑。我建议你遵守约翰·帕帕斯角度风格指南中的指导原则。他使用这个：

(function() {
     'use strict';
      // Get reference to your application
      angular.module('myapp')
          // Add the controller
          .controller('mycontroller',controller);
      // This makes the injection of the controller arguments
      // explicit
      controller.$inject = ['$scope', '$http'];
      // Here the actual controller is defined - where
      // the arguments are injected on the same location as
      // in the previous array
      function controller($scope, $http) {
            // Controller logic
      });
})();

你想把东西挡在全球空间之外。真的，你知道。这就是为什么他把所有东西都封装在一个立即调用函数表达式（IIFE）中。此外，您希望明确定义要注入的内容（$inject数组）。否则，您以后将无法缩小。

很抱歉，我刚刚添加了另一种定义AngularJS人工制品的方法。据我所知，这是一个比较知名的风格指南。我听说他正在与Angular的人密切合作，以确保他的风格指南也能更容易地过渡到新的Angular版本。

不，您不需要将所有内容都放在一个文件中，只需确保在任何其他文件之前都加载了angular.module('myapp',[])的文件即可。这将声明myapp模块，并将控制器附加到其上

在我写这篇文章的时候，我意识到还有另一种方法：在这个文件中创建一个新模块，附加控制器，然后将该模块加载到应用程序中。但是是的。。。这令人困惑。

相关文章：