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'

});