在$ routeProvider路由中定義控制器，該路由位於單獨的文件中

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}}而不是范圍中定義的內容。

然后我嘗試將控制器移動到另一個模塊中並依賴注入它。有趣的是，即使控制器被移動到一個單獨的模塊，它也行不通：

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

我想知道當你的控制器在一個單獨的文件中時，是否有其他人有辦法支持將控制器放入路由器。

Answer 1

您可以通過這種方式組織項目

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>

Answer 2

這里的代碼缺少執行它的() ...

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

Answer 3

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

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

在$ routeProvider路由中定義控制器，該路由位於單獨的文件中

問題描述

3 個解決方案

解決方案1
1 2015-06-05 15:30:43

解決方案2
1 2015-06-05 16:40:24

解決方案3
1 已采納 2015-06-05 16:40:31

在$ routeProvider路由中定義控制器，該路由位於單獨的文件中

問題描述

3 個解決方案

解決方案1 1 2015-06-05 15:30:43

解決方案2 1 2015-06-05 16:40:24

解決方案3 1 已采納 2015-06-05 16:40:31

解決方案1
1 2015-06-05 15:30:43

解決方案2
1 2015-06-05 16:40:24

解決方案3
1 已采納 2015-06-05 16:40:31