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'); 
} 
]) 

，然後你的儀表板可爲：

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

});