Контроллеры загрузки Отдельно используя контроллер как синтаксис и ngRoute

Question

У меня есть следующий Угловой модуль, Маршруты и контроллеры внутри моего index.js файла. Ничего сложного. Пока я загружаю этот один файл javascript в свой файл Index.html, и все работает нормально, поскольку у меня есть ng-app & ng-view в файле Index.html. Достаточно просто

// /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? Я хочу предположить, что эти два контроллера в конечном итоге сделают что-то сложное, и поэтому я отделяю их сейчас.

ВОПРОС: Используя (контроллер в качестве синтаксиса) Как именно я это делаю и что делает 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"; 
};