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

Question

原代码如下:

(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}} 而不是范围中定义的内容。

然后我尝试将 Controller 移动到另一个模块并将依赖注入(inject)它。有趣的是，即使 Controller 移动到一个单独的模块它也不会工作:

(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";
        });
});

事实上，在这一个中它抛出了找不到 Controller 的错误。

据我所知，这是因为配置 block 运行的性质，以及它在注册 Controller 之前的运行方式。

我解决这个问题的一种方法是将 Controller 和模板移到指令中，然后使用指令本身作为模板。

(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: '/'
                });
        });
})();

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

Answer 1

您的 Controller 文件中缺少一个 () 自执行函数 (IIFE)。

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