使用打字稿类型时，AngularJS控制器“不是函数，未定义”答案

【问题标题】：AngularJS controller "is not a function, got undefined" when using typescript type使用打字稿类型时，AngularJS控制器“不是函数，未定义”
【发布时间】：2016-06-20 00:32:15
【问题描述】：

我正在使用带有 Typescript 的 AngularJS (v1.4.5)。我正在设置一个示例应用程序，以确保在我开始使用 Angular 之前一切正常（呃，这很难说）。

我的设计有点基于this Scott Logic blog post。

我开始使用我的控制器作为 app modules(...).controller 声明中的一个函数，它运行良好。

module Sample {
    var app = angular.module("beerApp", [])
        .controller("beerController", ($scope) => {
            $scope.beers = [
                "Corona",
                "Carlsberg",
                "Cronenberg"
            ];
        });
}

但我决定尝试拆分文件并正确执行，但是我现在在标题中遇到错误。 "错误：[ng:areq] 参数 'beerController' 不是函数，未定义

这是我的应用程序。

index.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Beer list</title>
    <!-- styles:css -->
    <link rel="stylesheet" href="/.build/css/appStyles.css">
    <!-- endinject -->
    <!-- vendors:js -->
    <script src="/.build/vendors/vendors.js"></script>
    <!-- endinject -->
    <!-- app:js -->
    <script src="/.build/spa/app.js"></script>
    <!-- endinject -->
</head>
<body>
    <main ng-app="beerApp">
        <div ng-controller="beerController">
            <p>You can select from any of the following beers:</p>
            <ul>
                <li ng-repeat="beer in beers">
                    {{beer}}
                </li>
            </ul>
        </div>
    </main>
</body>
</html>

app.ts（通过 gulp 编译成 app.js）

module Sample {
    var app = angular.module("beerApp", [])
        .controller('beerController', BeerController);
}

BeerController.ts（也被 gulp 编译成 app.js）

module Sample {
    export interface IBeerScope extends ng.IScope {
        beers: string[];
    }

    export class BeerController {
        // needed so that uglify doesn't minify the special $scope variable name away
        public static $inject = ['$scope'];

        constructor(private $scope: IBeerScope) {
            $scope.beers = [
                "Corona",
                "Carlsberg",
                "Cronenberg"
            ];
        }
    }
}

无奈之下，我还尝试注释掉 BeerController.ts 并将其复制粘贴到 app.ts 的底部，看看是否解决了问题，看看是否是文件包含问题，但这似乎没有帮助。

“不是函数”这件事让我想知道它是否与我的 Typescript 有问题，但我不确定。我正在阅读的博客文章似乎只是将类型作为第二个参数传递给控制器，而 angular.d.ts 似乎表明这没关系，即使它实际上并没有说明可以将类型作为第二个参数传递（我正在使用从节点模块 Typings 获取的definitelyTyped 存储库中可用的角度类型）。

我知道这个问题在 AngularJS 中被问了很多，我已经阅读了其中的一些以确保答案还没有出现。但我检查了所有常见的东西，但不是那些。一定是什么让我难以捉摸。

我已经检查过的问题是：

对此表示感谢。

【问题讨论】：

看起来 BeerController 没有正确编译并且在运行时丢失，你的 tsconfig 选项是什么？
信不信由你，我没有使用 tsconfig，只是作弊并使用 VS 的默认 Typescript 文件构建。这不是个好主意吗？

标签： angularjs typescript

【解决方案1】：

好的，所以你的问题是文件的加载方式。

在你的类定义之后向下移动你的控制器注册，它会正常工作。

class BeerController {
   ...
}

angular.module("beerApp", []).controller("beerController", BeerController);

如果您在单独的文件中有这些定义，我建议您将模块定义移动到单个文件中，并且只在控制器文件中注册您的控制器，如下所示。

app.js

angular.module("beerApp", []);

beerController.ts

class BeerController {
   ...
}

angular.module("beerApp").controller("beerController", BeerController);

看到这个running JSFiddle

【讨论】：

你成功了！谢谢。我什至不在正确的路线上。我实际上稍微改变了它，所以在 app.ts 我有： export var beerApp = angular.module("beerApp", []);然后我在控制器文件中将控制器添加到导出的 beerApp 对象中，以防止自己弄错名称。这是一个明智的改进，还是我在为以后的文件排序设置问题？
我不会导出 app 变量。无需将其保存在内存中。只需在您需要它的几次时取出它。这也不会污染全局命名空间。
很公平，我会保留它以防万一。再次感谢。