Question

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

我开始使用我的控制器作为应用程序模块（...）。控制器声明中的一个函数，它工作正常。

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的底部以查看是否可以解决问题，看看它是否是文件包含问题，但似乎没有帮助

“不是一个功能”的东西让我想知道它是不是我的打字稿，但我不确定。我正在阅读的博客文章似乎只是传入一个类型作为控制器的第二个参数，而angular.d.ts似乎表明没关系，即使它实际上没有表明类型可以作为第二个参数传递（我正在使用通过节点模块Typings抓取的DefinitelyTyped存储库上可用的角度类型）。

我知道AngularJS已经对这个问题进行了很多讨论，我已经阅读了其中的一些问题，以确保答案尚未解决。但是我已经检查了所有常见的东西，而不是那些。必须是逃避我的事。

我已经检查过的答案是：

感谢任何帮助。

Answer 1

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

在课程定义后将控制器注册与Angular一起移动，它会正常工作。

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

使用typescript类型

1 个答案: