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

你想把东西放在全球空间之外。真的 - 你这样做。这就是为什么他将所有内容都包含在一个立即调用的函数表达式（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的控制器语法

2 个答案: