SPA的App结构 - AngularJS

时间:2016-08-17 12:39:01

标签: javascript angularjs controller single-page-application mean-stack

我有一个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
        })
    
  3. 我不确定这里的方法是否合适。我想让我的应用程序模块化并分离关注点。

1 个答案:

答案 0 :(得分:0)

如果您使用类似于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'

});