多页角度应用的架构

Question

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

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

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

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

要么

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

Answer 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>

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

这是一篇关于Angular 1.x模块的文章

如果您对使用TypeScript感兴趣，这里的教程包含两个页面，其中2个共享部分使用指令 ，如上所述。 查看接近结尾的部分“使用共享指令的示例页面”。 该教程包含一个github存储库 。 在该教程中，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('')
});

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