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

Loading Controllers Separately using Controller As Syntax and ngRoute

本文关键字：控制器 ngRoute 加载 语法      更新时间：2023-09-26

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

// /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";
};

现在我明白了，在这个时间点把它分开是愚蠢的，因为如果这就是我使用 angular 的全部目的，为什么不把它全部保存在一个 javascript 文件中。理解了，但是我想知道如何在这个层面上正确地分离这些东西，以便我有一个基本的了解。

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

问题：使用(控制器作为语法(我究竟如何执行此操作，索引.js文件的外观以及两个 home.js 和 about.js 文件在分离时是什么样子的？

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

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

我已将路由留在该文件中。出于某种原因，我要么使用了错误的语法，要么做错了。

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

您可以像这样拆分文件并将其全部添加到索引中.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";
};
相关文章：