Angular Architecture

Each module in an Angular app is a module component. A module component is the root definition for that module that encapsulates the logic, templates, routing and child components.

The design in the modules maps directly to our folder structure, which keeps things maintainable and predictable. We should ideally have three high-level modules: root, component and common. The root module defines the base module that bootstraps our app, and the corresponding template. We then import our component and common modules into the root module to include our dependencies. The component and common modules then require lower-level component modules, which contain our components, controllers, services, directives, filters and tests for each reusable feature.

Root Module

A root module begins with a root component that defines the base element for the entire application, with a routing outlet defined, example shown using ui-view from ui-router.

// app.component.js

export const AppComponent = {

template: `

<header>

Hello world

</header>

<div>

<div ui-view></div>

</div>

<footer>

Copyright MyApp 2016.

</footer>

`

};

A root module is then created, with AppComponent imported and registered with .component(‘app’, AppComponent). Further imports for submodules (component and common modules) are made to include all components relevant for the application.

// app.module.js

import angular from ‘angular’;

import uiRouter from ‘angular-ui-router’;

import { AppComponent } from ‘./app.component’;

import { ComponentsModule } from ‘./components/components.module’;

import { CommonModule } from ‘./common/common.module’;

import ‘./app.scss’;

export const AppModule = angular

.module(‘app’, [

ComponentsModule,

CommonModule,

uiRouter

])

.component(‘app’, AppComponent)

.name;

Component module

A Component module is the container reference for all reusable components. See above how we import ComponentsModule and inject them into the Root module, this gives us a single place to import all components for the app. These modules we require are decoupled from all other modules and thus can be moved into any other application with ease.

import angular from ‘angular’;

import { CalendarModule } from ‘./calendar/calendar.module’;

import { EventsModule } from ‘./events/events.module’;

export const ComponentsModule = angular

.module(‘app.components’, [

CalendarModule,

EventsModule

])

.name;

Common module

The Common module is the container reference for all application specific components, that we don’t want to use in another application. This can be things like layout, navigation and footers. See above how we import CommonModule and inject them into the Root module, this gives us a single place to import all common components for the app.

import angular from ‘angular’;

import { NavModule } from ‘./nav/nav.module’;

import { FooterModule } from ‘./footer/footer.module’;

export const CommonModule = angular

.module(‘app.common’, [

NavModule,

FooterModule

])

.name;

Low-level modules

Low-level modules are individual component modules that contain the logic for each feature block. These will each define a module, to be imported to a higher-level module, such as a component or common module, an example below. Always remember to add the .name suffix to each export when creating a new module, not when referencing one.

import angular from ‘angular’;

import uiRouter from ‘angular-ui-router’;

import { CalendarComponent } from ‘./calendar.component’;

import ‘./calendar.scss’;

export const CalendarModule = angular

.module(‘calendar’, [

uiRouter

])

.component(‘calendar’, CalendarComponent)

.config(($stateProvider, $urlRouterProvider) => {

‘ngInject’;

$stateProvider

.state(‘calendar’, {

url: ‘/calendar’,

component: ‘calendar’

});

$urlRouterProvider.otherwise(‘/’);

})

.name;

File naming conventions

Keep it simple and lowercase, use the component name, e.g. calendar.*.js*, calendar-grid.*.js – with the name of the type of file in the middle. Use *.module.js for the module definition file, as it keeps it verbose and consistent with Angular.

calendar.module.js

calendar.component.js

calendar.service.js

calendar.directive.js

calendar.filter.js

calendar.spec.js

calendar.html

calendar.scss

Scalable file structure

File structure is extremely important, this describes a scalable and predictable structure. An example file structure to illustrate a modular component architecture.

├── app/

│   ├── components/

│   │  ├── calendar/

│   │  │  ├── calendar.module.js

│   │  │  ├── calendar.component.js

│   │  │  ├── calendar.service.js

│   │  │  ├── calendar.spec.js

│   │  │  ├── calendar.html

│   │  │  ├── calendar.scss

│   │  │  └── calendar-grid/

│   │  │     ├── calendar-grid.module.js

│   │  │     ├── calendar-grid.component.js

│   │  │     ├── calendar-grid.directive.js

│   │  │     ├── calendar-grid.filter.js

│   │  │     ├── calendar-grid.spec.js

│   │  │     ├── calendar-grid.html

│   │  │     └── calendar-grid.scss

│   │  ├── events/

│   │  │  ├── events.module.js

│   │  │  ├── events.component.js

│   │  │  ├── events.directive.js

│   │  │  ├── events.service.js

│   │  │  ├── events.spec.js

│   │  │  ├── events.html

│   │  │  ├── events.scss

│   │  │  └── events-signup/

│   │  │     ├── events-signup.module.js

│   │  │     ├── events-signup.component.js

│   │  │     ├── events-signup.service.js

│   │  │     ├── events-signup.spec.js

│   │  │     ├── events-signup.html

│   │  │     └── events-signup.scss

│   │  └── components.module.js

│   ├── common/

│   │  ├── nav/

│   │  │     ├── nav.module.js

│   │  │     ├── nav.component.js

│   │  │     ├── nav.service.js

│   │  │     ├── nav.spec.js

│   │  │     ├── nav.html

│   │  │     └── nav.scss

│   │  ├── footer/

│   │  │     ├── footer.module.js

│   │  │     ├── footer.component.js

│   │  │     ├── footer.service.js

│   │  │     ├── footer.spec.js

│   │  │     ├── footer.html

│   │  │     └── footer.scss

│   │  └── common.module.js

│   ├── app.module.js

│   ├── app.component.js

│   └── app.scss

└── index.html

The high level folder structure simply contains index.html and app/, a directory in which all our root, component, common and low-level modules live along with the markup and styles for each component.