Структура приложения для SPA - AngularJS

Question

У меня есть приложение MEAN Stack, которое ранее было серверным приложением, и теперь я пытаюсь преобразовать его в одностраничное приложение.

Мой Текущий Состав:

• У меня есть index.ejs файл, который загружает основной вид и содержит ng-view тег.
• В файле index.ejs есть меню с 5 элементами. Каждый элемент загружает новое представление внутри ng-view.
• Каждый пункт меню загружает новое представление, и каждый из них имеет свои собственные контроллеры.

Мой Выпуск:

В настоящее время все мои функциональность находится под управлением одного контроллера, так когда я использую ngRoute это выглядит следующим образом:

myCtrl.config(function($routeProvider) { 
    $routeProvider 

     // route for the home page 

     .when('/', { 
      templateUrl: '/test.ejs', 
      controller: 'myCtrl1', 
     }) 

     // route for the about page 
     .when('/proposals', { 
      templateUrl: '/profile.ejs', 
      controller: 'myCtrl1' 
     }) 

     // route for the contact page 
     .when('/bios', { 
      templateUrl : '/test2.ejs', 
      controller : 'myCtrl1' 
     }); 
}); 

Это вызывает мой файл контроллера для многих кода. Я хочу разделить их на основе их возможностей. Поэтому каждый вид должен иметь свой собственный контроллер.

Мои вопросы:

1. Что правильная структура приложения для данного типа сценария.

2. Как я могу поместить внешние контроллеры в ngRoute так:

   myApp.controller('myCtrl1',function($scope){}); 
   
       .when('/', { 
        templateUrl: '/test.ejs', 
        controller: 'myCtrl1', // INTERNAL CONTROLLER 
       }) 
   
   
       .when('/proposals', { 
        templateUrl: '/profile.ejs', 
        controller: '/directory2/js/myCtrl2' //EXTERNAL CONTROLLER 
       }) 
   

Я не уверен, Что правильный подход здесь. Я хочу сделать свое приложение модульным и разделять беспокойство.

Answer 1

Если вы используете компонент на основе архитектуры как описанной here, вы можете иметь следующую структуру:

маршрутизатор:

angular.module('myModule', ['ngRoute', 'dashboard', 'calendar']) 
.config(['$locationProvider', '$routeProvider', 
function config($locationProvider, $routeProvider) { 
    $locationProvider.hashPrefix('!'); 

    $routeProvider.when('/dashboard', { 
     template: '<dashboard></dashboard>', 
     controller: function ($rootScope) { 
      $rootScope.name = "Dashboard"; 
     } 

    }).when('/calendar', { 
     template: '<calendar></calendar>', 
     controller: function ($rootScope) { 
      $rootScope.name = "Calendar events"; 
     } 

    }).otherwise('/dashboard'); 
} 
]) 

, а затем ваш Dashboard может быть:

angular. 
module('dashboard'). 
component('dashboard', { 
    controller: DashboardController, 
    templateUrl: 'dashboard/dashboard.html' 

});