Javascript TestController不是未定义的函数_Javascript_Angularjs

Javascript TestController不是未定义的函数

javascript angularjs

Javascript TestController不是未定义的函数,javascript,angularjs,Javascript,Angularjs,因此，当控制器位于不同的文件中时，我似乎无法让它工作现在我只是想做一个小型的控制器测试，看看angular是如何工作的。这是我的档案：这是我的app.js (function(angular) { var AngularApp = angular.module('AngularApp', []); })(window.angular); 这是我的控制器文件：TestController.js (function(angular) { var AngularApp = ang

因此，当控制器位于不同的文件中时，我似乎无法让它工作

现在我只是想做一个小型的控制器测试，看看angular是如何工作的。这是我的档案：

这是我的app.js

(function(angular) {
    var AngularApp = angular.module('AngularApp', []);
})(window.angular);

这是我的控制器文件：TestController.js

(function(angular) {
    var AngularApp = angular.module('AngularApp');

    AngularApp.controller("TestController", ["$scope", function($scope) {
        $scope.appTitle = "AngularApp";
    }]);
})(window.angular);

这是我的html：

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="" ng-app="AngularApp" ng-controller="TestController"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title ng-bind="appTitle"></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="apple-touch-icon" href="apple-touch-icon.png">

        <link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap.min.css">
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>
        <link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="/assets/css/main.css">

        <script src="/assets/libs/modernizr-2.8.3-respond-1.4.2.min.js"></script>
        <script src="/assets/libs/angular/angular.js"></script>
    </head>
    <body>
        ...
    </div> <!-- /container -->        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="/assets/libs/jquery-1.11.2.min.js"><\/script>')</script>

        <script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>

        <script src="/app/app.js"></script>
        <scirpt src="/app/components/home/TestController.js"></script>
    </body>
</html>

TestController.js：

AngularApp.controller("TestController", ["$scope", function($scope) {
    $scope.appTitle = "AngularApp";
}]);

我还尝试了使用和不使用数组表示法的依赖关系

当控制器在同一个文件中时，它似乎工作正常，但当它在单独的文件中时，我无法使它工作。我总是遇到以下错误：

我使用的是angular版本1.4.8

任何帮助都将不胜感激

您是否已将其包含在index.html中？它会像任何其他脚本一样被包括进来

是的，它在文件的底部：你刚刚帮助我意识到我把脚本拼写错了。。。非常感谢。

AngularApp.controller("TestController", ["$scope", function($scope) {
    $scope.appTitle = "AngularApp";
}]);