多页角度应用的架构答案

【问题标题】：Architecture for multi-page angular application多页角度应用的架构
【发布时间】：2016-05-31 22:41:22
【问题描述】：

我们必须设计一个有角度的多页应用程序。页面看起来像这样：

我计划以这样一种方式设计页面，即页面的每个部分都将具有与之关联的特定角度控制器，并且将定义一个模板，该模板将通过 ng-include 指令添加。所以基本上第 1 页（路由 ==> '/'）将有 4 个不同的部分，这些部分将有 4 个不同的控制器。

当然，这在单个页面上可以正常工作，但我不确定如何在此处定义路线。

1) 我是否应该有嵌套控制器，所以对于第 1 页，我们有一个 page1Controller，所有其他控制器都在此之下。这会是一个好的设计吗？

或

2) 我是否应该每页有一个控制器，这样可以简化路由并为页面的每个部分定义指令？

【问题讨论】：

我会使用 2 个状态（对于两个页面），具有不同的视图（对于部分），每个视图都是一个指令。
虽然通常不推荐，但可以使用 ngController 指令代替在 Routing 上定义页面控制器。我会走那条路。
@MayK ：谢谢，您的意思是两种状态，两个页面各只有一个控制器，对吧？
@ItaloAyres：你能否提供更多关于你的方法的细节
@Mugambo 就像this

标签： javascript angularjs architecture

【解决方案1】：

我想我建议只使用多个命名视图。每个命名视图都可以有自己的控制器：

$stateProvider
  .state('home', {
    url: '/',
    views: {
      '': {
        templateUrl: 'templates/app.tpl.html',
      },
      'section1': {
        controller: 'Section1Controller as vm',
        templateUrl: 'templates/section1.tpl.html'
      },
      'section2': {
        controller: 'Section2Controller as vm',
        templateUrl: 'templates/section2.tpl.html'
      },
      'section3': {
        controller: 'Section3Controller as vm',
        templateUrl: 'templates/section3.tpl.html'
      },
      'section4': {
        controller: 'Section4Controller as vm',
        templateUrl: 'templates/section4.tpl.html'
      }
    }
  })
  .state('page2', {
    url: '/page2',
    views: {
      '': {
        templateUrl: 'templates/page2.tpl.html',
      },
      'section1': {
        controller: 'Section1Controller as vm',
        templateUrl: 'templates/section1.tpl.html'
      },
      'section2': {
        controller: 'Section2Controller as vm',
        templateUrl: 'templates/section2.tpl.html'
      },
      'section3': {
        controller: 'Section3Controller as vm',
        templateUrl: 'templates/section3.tpl.html'
      }
    }
  })

然后，当您布置视图时，它们看起来像这样：

<div ui-view="section1"></div>
<div ui-view="section2"></div>
<div ui-view="section3"></div>
<div ui-view="section4"></div>

【讨论】：

但为此我必须使用angular-ui 库。这有可能在本地完成吗？
值得一提的是，这里使用 UI-Router 而不是 angular-route
@Mugambo 我发现使用 angular-ui 是比默认库更好的选择。如果你愿意改变它。
@ItaloAyres：谢谢。这似乎是更好的选择。我会试一试。谢谢迈克
@Mugambo，特别是它使用 UI 路由器。我不确定如何使用ngRoute 完成此操作，但我绝不建议使用ngRoute。

【解决方案2】：

我会使用指令来允许多个控制器，在 page1 和 page 2 之间重用代码，并为迁移到 Angular 2 做准备。

您的页面如下所示：

<section1></section1>
<section2></section2>
<section3></section3>
<section4></section4>

你必须为每个部分编写一个指令：

module.directive('section1', function() {
  return {
    scope: {},
    bindToController: {
    },
    controller: function() { },
    controllerAs: 'vm',
    template: `
      <div>This is section1
      </div>
    `
  }
});

这是给approximate module in Angular 1.x的文章

如果您对使用 TypeScript 感兴趣，这里是 tutorial that includes two pages with 2 shared sections using directives，如上所述。查看接近末尾的部分，称为“具有共享指令的示例页面”。本教程包括一个github repository。在那个教程中，page1 看起来像

h1 page1
page1-section1
page1-section2

而且，第二页共享相同的部分：

h1 page2
page2-section2
page2-section1

page1 和 page2 之间的控制器非常相似，并使用相同/共享的指令 (DigiSection1.Section1Directive) 创建部分标签：

angular
.module('digiangularjs.page1', [])
.controller('agendaController', Page1Controller)
.directive("page1Section1", [() => new DigiSection1.Section1Directive()])
.directive("page1Section2", [() => new DigiSection2.Section2Directive()])
;

对于第二页，我们使用相同的指令，但是

angular
.module('digiangularjs.page2', [])
.controller('page2Controller', Page2Controller)
.directive("page2Section1", [() => new DigiSection1.Section1Directive()])
.directive("page2Section2", [() => new DigiSection2.Section2Directive()])
;

【讨论】：

【解决方案3】：

根据 Mike 的回答，我会将您的路由级模板定义为作为高级布局容器的单个组件。

.state('page1', {
  url: '/page1',
  template: '<page1></page1>'
})
.state('page2', {
  url: '/page2',
  template: '<page2></page2> 
});

然后在您的 <page> 组件（它只是规定嵌套指令/组件的布局）中，您可以这样做：

.component('page1', {
  template: [
    '<section1></section1>',
    '<section2></section2>',
    '<section3></section3>'
  ].join('')
});

我还意识到您写了“多页应用程序”，这表明您根本不打算使用路由器。如果是这种情况，您的后端将不得不处理动态布局生成，这是一个完全不同的问题。

【讨论】：