Designing a multi-page angular application with a focus on architectural principles

Question

Designing a multi-page angular application with a focus on architectural principles

We are faced with the task of developing a multi-page application using Angular. The pages we are working on have distinct layouts and functionalities, like the ones shown in these images:

https://i.sstatic.net/NASiQ.png https://i.sstatic.net/yLS8s.png

Our approach involves assigning specific Angular controllers to each section of the page, with templates being added through the ng-include directive. For example, page 1 (route ==> '/') will consist of four different sections, each controlled by a separate controller.

While this structure works well for a single-page layout, we are unsure how to define routes within this context.

1) One option is to use nested controllers, where all other controllers are under a main page1Controller for page 1. Is this a good design choice?

or

2) Another option is to have one controller per page, simplifying routing and defining directives for each section of the page. What would be the best approach in this case?

javascript angularjs architecture

Answer 1

Answer №1

In my opinion, I would suggest utilizing multiple named views for better organization. Each named view can be associated with its own controller:

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

Then, when designing the layout, the views should be structured as follows:

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

Answer 2

In my opinion, I would suggest utilizing multiple named views for better organization. Each named view can be associated with its own controller:

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

Then, when designing the layout, the views should be structured as follows:

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

Answer 3

Answer №2

To enhance code reusability and prepare for migration to Angular 2, I recommend utilizing directives in order to support multiple controllers and reuse code across page1 and page2.

Your page structure will resemble the following:

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

Each section will require its own directive implementation:

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

If you want more details on this approach, refer to this article about approximating modules in Angular 1.x.

For those interested in TypeScript, check out this tutorial that demonstrates using directives for shared sections between pages. The tutorial also provides a GitHub repository for reference. In the tutorial, page1 layout includes:

h1 page1
page1-section1
page1-section2

The second page mirrors the same sections:

h1 page2
page2-section2
page2-section1

To achieve this, both pages leverage similar controllers by creating section tags with shared directives (DigiSection1.Section1Directive):

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

Similarly, for the second page, identical directives are used:

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

Answer 4

To enhance code reusability and prepare for migration to Angular 2, I recommend utilizing directives in order to support multiple controllers and reuse code across page1 and page2.

Your page structure will resemble the following:

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

Each section will require its own directive implementation:

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

If you want more details on this approach, refer to this article about approximating modules in Angular 1.x.

For those interested in TypeScript, check out this tutorial that demonstrates using directives for shared sections between pages. The tutorial also provides a GitHub repository for reference. In the tutorial, page1 layout includes:

h1 page1
page1-section1
page1-section2

The second page mirrors the same sections:

h1 page2
page2-section2
page2-section1

To achieve this, both pages leverage similar controllers by creating section tags with shared directives (DigiSection1.Section1Directive):

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

Similarly, for the second page, identical directives are used:

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

Answer 5

Answer №3

Expanding on Mike's response, I suggest defining your route-specific templates as individual components serving as top-level layout containers.

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

In your <page> components (responsible for laying out nested directives/components), you can structure it as follows:

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

Considering you mentioned a "multi-page application," indicating a lack of router usage, the backend will need to handle dynamic layout generation, presenting a distinct challenge.

Answer 6

Expanding on Mike's response, I suggest defining your route-specific templates as individual components serving as top-level layout containers.

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

In your <page> components (responsible for laying out nested directives/components), you can structure it as follows:

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

Considering you mentioned a "multi-page application," indicating a lack of router usage, the backend will need to handle dynamic layout generation, presenting a distinct challenge.

Designing a multi-page angular application with a focus on architectural principles

Answer №1

Answer №2

Answer №3

Similar questions

Launching a fresh tab or window using POST [PHP]

Combining Multiple Properties in a Single-File Component with Vue.js 2

What is the best way to convert a JSON string from a specific array into an array object?

Are only PHP conventions followed when elements with name attributes are sent to the server?

Tips for displaying the number of selected values in a select box label (e.g. Choose an Option)

Using querySelector to Target Elements by their InnerHTML Content

Failure encountered when attempting to load JSON data into datalist

How can a modal component be displayed in Nuxt3/Vue3 when it is triggered from the header component?

Discover the power of the "Load More" feature with Ajax Button on

Refreshing Information Iteratively

Uploading information to a server using Angular.js

How can I call the telerik radgrid.databind() function using a JavaScript function?

Find the word you're looking for and highlight it with color

Choose a div using jQuery and activate a hidden div

The Vuex store variable is being accessed prior to being populated with information retrieved from the API

What is the best way to trigger a re-render in a child component in React using forceUpdate

Load a Partial view once the page has finished loading

MongoSearch: A Geo-Targeted Search Engine tailored to your needs

Learn how to dynamically disable unchecked checkboxes and apply specific CSS classes to checked checkboxes in Angular 12 with TypeScript

Preserving the HTML format of a string stored in MongoDB: Best practices