javascript - 在$ routeProvider路由中定义位于单独文件中的 Controller

原始代码如下：

(function() {
    angular.module('test', ['ngRoute'])
        .config(function($routeProvider) {
            $routeProvider
                .when('/test', {
                    templateUrl: '/templates/test.html',
                    controller: 'testCtrl'
                })
                .when('/test2', {
                    templateUrl: '/templates/test2.html',
                    controller: 'test2Ctrl'
                })
                .otherwise({
                    redirectTo: '/test'
                });
        });
})();

//ANOTHER FILE
(function() {
    angular.module('test')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
});

没有错误，但是模板中显示的全部是{{name}}而不是作用域中定义的内容。

然后，我尝试将控制器移动到另一个模块中，并将依赖项注入其中。有趣的是，即使将控制器移动到单独的模块中，它也无法正常工作：

(function () {
    angular.module('test2', []);
    angular.module('test', ['ngRoute', 'test2']);
})();

//ANOTHER FILE
(function() {
    angular.module('test')
        .config(function($routeProvider) {
            $routeProvider
                .when('/test', {
                    templateUrl: '/templates/test.html',
                    controller: 'testCtrl'
                })
                .when('/test2', {
                    templateUrl: '/templates/test2.html',
                    controller: 'test2Ctrl'
                })
                .otherwise({
                    redirectTo: '/test'
                });
        });
})();

//ANOTHER FILE
(function() {
    angular.module('test2')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
});

实际上，在此过程中引发了一个错误，即找不到控制器。

据我了解，之所以发生这种情况是因为由于config块的运行方式以及在注册控制器之前如何运行的性质。

我解决此问题的一种方法是，将控制器和模板移到指令中，然后将指令本身用作模板。

(function() {
    angular.module('test')
        .config(function($routeProvider) {
            $routeProvider
                $routeProvider
                .when('/', {
                    template: '<test></test>'
                })
                .when('/test2', {
                    template: '<test2></test2>'
                })
                .when('/test3', {
                    template: '<test3></test3>'
                })
                .otherwise({
                    redirectTo: '/'
                });
        });
})();

我想知道当您的控制器位于单独的文件中时，是否还有其他人可以支持将控制器放入路由器中。

最佳答案

您在控制器文件上缺少()自执行功能（IIFE）。

//ANOTHER FILE
(function() {
    angular.module('test2')
        .controller('testCtrl', function($scope) {
            $scope.name = "test";
        })
        .controller('test2Ctrl', function($scope) {
            $scope.name = "test2";
        });
})(); //<-- added here

关于javascript - 在$ routeProvider路由中定义位于单独文件中的 Controller ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30669795/