Application structure

The application is organized in a way that is easy to fnd and change any script, separating the logic on controllers, directives, services and external libraries as well as scss files.

The HTML templates are also separate using angular-route to map between templates for a more performant and clean structure. Next are described all parts of the application and what to find in each of these parts : 


Contians all  the main includes, the overall sctructure of the page. Here is where lies the main imports for javscript and css, font, and HTML dom representation. Templates of specific pages are not present here but imported using ng-include


In this folder are included the stylesheets for the application. whenever you want to make changes to the style of the application you can make them here. These files are included to be compressed in the Gruntfile.js where they will be minified and compressed and imported into the "dist" folder.

Stylesheets are organized following the SMACSS structure to make it easier to find and manage a large CSS structure. CSS files are organizes in the following folders :

  • Partials - The partials are mixins that are used across the application like @include box-shadow
  • Base - The base CSS files styling general elements like forms, buttons, cards, labels, lists etc
  • Settings - Cotains the settings for the application. Working like a configuration for the application CSS. Contains the colors of the theme in the file colors.scss
  • Components - Application specific components like Charts, maps, team members styling etc


In this folder are included all external libraries to be used by the theme.This folder does not contain app specific files but only external libraries. These files are included because they are either not available via bower or are being used in a very specific version.


This is the folder where all images are stored. They are copied to the final dist folder by grunt tasks


The fonts directory contains fonts for the application. The fonts included in this folder are the weather icons.


The mp3 directory contains music files for the app. They will also be ported into th dist folder on grunt task running.


The app directory is where the Angular app resides. here are all the templates, directives, controllers, components, main app file and services. The app directory contains three main directories.

  • Views - This is where all templates for pages reside
  • Components - Specific components like the chat are contained here. Each on in a file containing the necessary js module controller and directives and also if applicable the html.
  • Common - Header and navigation live here. Also inside is all the necessary javascript for these areas.
  • app.js - The inicitalization of the app. Containing the .config function all including all necessary angular modules for the app.
  • config.js - Contains app settings, namely the colors for the angular theme setup. See theming - colors chapter for more info on how to setup this.