Question

所以当我的控制器位于不同的文件中时，我似乎无法让它运行。

现在我只是想做一个小型测试控制器，看看角度是如何工作的。这是我的文件：

这是我的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>

现在我只是想替换页面的标题。我尝试了很多不同的方法。现在我将js包装在立即调用的函数中，但我已经尝试过了。我试过让模块成为一个全局变量，只是使用该变量来定义一个控制器。例如：

App.js：

AngularApp = angular.module('AngularApp', []);

TestController.js：

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

我还尝试过使用和不使用数组表示法的依赖项。

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

我正在使用角度版本1.4.8

非常感谢任何帮助！

TestController不是一个未定义的函数

0 个答案: