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' 

});