Javascript AngularJS-'；控制器不是函数：分离控制器文件

我得到的“控制器在我的应用程序中不是函数错误”

从我所读到的内容来看，最常见的问题是，

html

页面中没有引用控制器文件-我不是这样

当我将控制器包含在声明模块的同一文件中时，但当我为每个控制器使用单独的文件时，我不会收到错误

以下是我的文件夹结构：

app.js:

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'assets/views/mainView.html',
        controller: 'assets/controllers/mainController.js'
    });
});

mainController.js

var myApp = angular.module('myApp');

myApp.controller('mainController', ['$scope', function($scope){
    $scope.name = "test";
}]);

    (function () {
         var myApp = angular.module('myApp', ['ngRoute']);

        myApp.config(function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'assets/views/mainView.html',
                controller: 'mainController'
            });
        });
    })();

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

        myApp.controller('mainController', ['$scope', function($scope){
            $scope.name = "test";
        }]);

    })();

我还了解到，当您声明一个模块时，数组中的大括号[]会创建一个新模块，因此我将它们从mainController.js中的模块中取出

如果我这样做，它会起作用：

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'assets/views/mainView.html',
        controller: 'mainController.js'
    });
});


myApp.controller('mainController', ['$scope', function($scope){
    $scope.name = "hi";
}]);

我在head部分的index.html中引用了如下控制器：

<script src="assets/scripts/js/app.js"></script>
<script src="assets/controllers/mainController.js"></script>

---

你在使用iLife吗？如果不是，则不应指定角度模块

var myApp=angular.module（'myApp'）在
mainController.js
上，因为它覆盖了
myApp
变量，因为它被视为全局变量

如果你想应用iLife，你的代码应该是：

app.js

var myApp = angular.module('myApp');

myApp.controller('mainController', ['$scope', function($scope){
    $scope.name = "test";
}]);

    (function () {
         var myApp = angular.module('myApp', ['ngRoute']);

        myApp.config(function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'assets/views/mainView.html',
                controller: 'mainController'
            });
        });
    })();

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

        myApp.controller('mainController', ['$scope', function($scope){
            $scope.name = "test";
        }]);

    })();

mainController.js

var myApp = angular.module('myApp');

myApp.controller('mainController', ['$scope', function($scope){
    $scope.name = "test";
}]);

    (function () {
         var myApp = angular.module('myApp', ['ngRoute']);

        myApp.config(function ($routeProvider) {
            $routeProvider.when('/', {
                templateUrl: 'assets/views/mainView.html',
                controller: 'mainController'
            });
        });
    })();

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

        myApp.controller('mainController', ['$scope', function($scope){
            $scope.name = "test";
        }]);

    })();

当您在另一个文件中拥有控制器时，无需提供您在配置中提供的控制器路径

    myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
    templateUrl: 'assets/views/mainView.html',
     //Remove this
    //controller: 'assets/controllers/mainController.js'
     //and then try this
       controller: 'mainController'
   });
});

移除var myApp=angular.module（'myApp'）；从控制器文件。仍然是相同的结果您在配置函数中给出了控制器的文件路径，如下所示：controller:'assets/controllers/mainController.js'，而据我所知，它是控制器名称，而不是路径，在您的示例中是这样的：controller:'mainController'。尝试这样做，让我知道谢谢我发布了答案。谢谢，我从来没有想到你不需要指定控制器的路径。。。