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

这导致我的控制器文件出现了很多代码。我想根据他们的功能划分它们。所以每个视图都应该有自己的控制器。

我的问题：

这类场景的应用结构是什么。

如何将外部控制器放入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'

});

SPA的App结构 - AngularJS

1 个答案: