在单独文件中的$routeProvider路由中定义一个控制器

Defining a controller in a $routeProvider route that is located in a separate file

本文关键字：一个定义控制器路由文件单独 routeProvider 更新时间：2023-09-26

原代码如下:

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

事实上，在这个例子中，它抛出了一个无法找到控制器的错误。

根据我的理解，发生这种情况是因为由于配置块运行的性质，以及它在控制器注册之前运行的方式。

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

(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

您可以这样组织项目

templates/
    test.html
    test2.html
app/
    app.js
    controllers/
        testCtrl.js
        test2Ctrl.js

app.js

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

html文件

一旦你在html文件中添加了控制器，可能就不会再有这个问题了

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="app/controllers/testCtrl.js"></script>
    <script src="app/controllers/test2Ctrl.js"></script>
    </body>
</html>

这段代码缺少执行它的()…

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

应:

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