Question

我的index.js文件中有以下Angular模块，路由和控制器。没什么复杂的。到目前为止，我将这个javascript文件加载到我的Index.html文件中，一切正常，因为我有ng-app＆amp; Index.html文件中的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";
};

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

这是我想要做的。我想将两个控制器（homeController和ampController）分离到自己的文件中。我也想知道如何处理路线。他们被移动到他们自己的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作为语法和ngRoute加载控制器

1 个答案: