我正在尝试理解 AngularJS 的 controllerAs 语法

Question

然而，在写了几个例子来玩控制器之后，控制器不会加载。我收到一个错误：

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"



})
});

Answer 1

你说得对，Angular 允许使用多种不同的符号，这可能很烦人且令人困惑。我建议您遵守 John Papas Angular Style Guide 中的指南。他用这个：

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

您想将某些东西排除在全局之外 space。真的 - 你做的。这就是为什么他将所有内容都包装在立即调用的函数表达式 (IIFE) 中。另外 - 你想要明确定义你正在注入的内容（ $inject 数组）。否则，您以后将无法缩小。

所以很抱歉 - 我刚刚添加了另一种定义 AngularJS 工件的方法。据我了解，这是目前最著名的风格指南之一。我听说他正在与 Angular 人员密切合作，以确保他的风格指南也能更轻松地过渡到新的 Angular 版本。

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

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

Answer 2

应该是

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>

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

我正在尝试理解 AngularJS 的 controllerAs 语法

I am trying to understand AngularJS's controllerAs syntax

javascript

angularjs

angularjs-controller