分别使用控制器作为语法和ngRoute的控制器加载

Question

我有以下的角度模块，路由和控制器在我的index.js文件。没什么复杂的。到目前为止，我将这个javascript文件加载到我的Index.html文件中，只要我在Index.html文件中有ng-app &ng-视图，一切都可以正常工作。很简单

// /ng-modules/render-index.js
angular
    .module("homeIndex", ["ngRoute"])
    .config(config)
    .controller("homeController", homeController)
    .controller("aboutController", aboutController);

function config($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/ng-templates/homeView.html",
            controller: "homeController",
            controllerAs: "vm"
        })
        .when("/about", {
            templateUrl: "/ng-templates/aboutView.html",
            controller: "aboutController",
            controllerAs: "vm"
        })
        .otherwise({ redirectTo: "/" });
};

function homeController() {
    var vm = this;
    vm.title = "Home Page";
};

function aboutController() {
    var vm = this;
    vm.title = "About Us";
};

现在我明白了，在这个时候把它分开将是愚蠢的，因为如果这是我所使用的所有角，为什么不把它都保存在一个javascript文件中。明白了，但我想知道如何在这个层次上正确地把这些事情分开，这样我就有了一个基本的理解。

这是我想做的。我想将两个控制器(homeController和aboutController)分离到它们自己的文件中。我也想知道如何处理这些路线。他们会被移动到他们自己的javascript文件中吗?他们会留在index.js文件中吗？我想假设这两个控制器最终会做一些复杂的事情，因此我现在将它们分开。

问题:使用(Controller语法)的是如何做到这一点的?当两个home.js和about.js文件被分开时，index.js文件是什么样的？

我尝试过的：，我尝试将每个控制器放入它们自己的文件中，并将它们注入index.js文件

    angular
    .module("homeIndex", ["ngRoute", "homeController", "aboutController])

我把路由留在文件里了。FOr

Answer 1

您尝试的内容不起作用，因为您试图将控制器加载为模块依赖项。

您可以像这样拆分文件并将它们全部添加到index.html中

// index.js
angular
    .module("homeIndex", ["ngRoute"]);


//route.js
angular
    .module("homeIndex")
    .config(config);
function config($routeProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/ng-templates/homeView.html",
            controller: "homeController",
            controllerAs: "vm"
        })
        .when("/about", {
            templateUrl: "/ng-templates/aboutView.html",
            controller: "aboutController",
            controllerAs: "vm"
        })
        .otherwise({ redirectTo: "/" });
};


// homeController.js
angular
    .module("homeIndex")
    .controller("homeController", homeController)
function homeController() {
    var vm = this;
    vm.title = "Home Page";
};

// aboutController.js
angular
    .module("homeIndex")
    .controller("aboutController", aboutController);
function aboutController() {
    var vm = this;
    vm.title = "About Us";
};