多页角度应用的架构

Question

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

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

现在可以在一个页面上正常工作，但我不确定如何在这里定义路线。

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

或

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

Answer 1

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

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

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

sub()

Answer 2

我会使用指令允许多个控制器，在第1页和第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()])
;

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

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