使用 Controller As Syntax 和 ngRoute 分别加载控制器

Question

我的 index.js 文件中有以下 Angular 模块、路由和控制器。没有什么复杂的。到目前为止，我将这个 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 文件中吗？我想假设这两个控制器最终会做一些复杂的事情，因此我现在将它们分开。

问题： 使用 (Controller as syntax) 我该怎么做？index.js 文件是什么样子的？两个 home.js 和 about.js 文件分开后是什么样子的？

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

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

我把路由留在了那个文件里。出于某种原因，我要么使用了错误的语法，要么做错了。

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

使用 Controller As Syntax 和 ngRoute 分别加载控制器

Loading Controllers Separately using Controller As Syntax and ngRoute

javascript

controller

url-routing

angularjs