-
Notifications
You must be signed in to change notification settings - Fork 1
101 File structure
All files for the portal are in src folder. The src folder has the index.html and the app folder. We also have configured bower in the .bowerrc to put all bower dependencies into src/bower-components.
The portal is structured into modules. The modules can be found in the app folder. Each module has its own "main" file that has the same name as the module. This file should configure the module. You also have a scss file that should import all styles for the module and a routes file that should define all available routes for the module.
This is the file where you define your app module and require other modules as dependencies
angular.module('mwPortal', [
'ngRoute', //angular dependencies
'ngAnimate',
'mwUI', // third party dependency
'mwPortal.Start' // your sub modules
'mwPortal.Main', // make sure that the main modules is at the end
]);This file should only have the module definition nothing else (no .config() nor .run() configuration). All basic configurations should happen in the main module (modules/main/main.js)
The mwPortal.Main (main module) should be always the last module to make sure that the configurations that are done in this module are applied on top of the others. Angular is executing the config blocks from top to bottom. Any default configuration should be done at the end to make sure that not any other configuration is overwritten.
This file should import all the styles. Make sure all filenames of the files that you import start with a _ (underscore). This is important for the sass compiler because it treats those files as imports and compiles them only inside the main.scss and not separately. The main.scss should be the only file where the filename does not start with an underscore.
@import "variables"; //this is the file where we overwrite default bootstrap variables
@import "../bower-components/font-awesome/scss/font-awesome"; // font awesome for font icons
@import "../bower-components/sass-bootstrap/lib/bootstrap";
@import "../bower-components/mw-uikit/src/mw_ui";
@import "modules/main/main"; // import the "main" file of each module
@import "modules/start/start";To not define any styles here. All global styles should be defined in the main module
(modules/main/styles/_main.styles.scss)
This is the file were we overwrite bootstrap default variables like $brand-primary
$brand-primary: #52576e; // set your main color here
$input-border-focus: $brand-primary;
$border-radius-base: 2px;
$border-radius-large: 0;
$border-radius-small: 0 !important;
$font-family-sans-serif: 'Nunito', sans-serif;Our rule of thumb for the modules is: When there is a CRUD endpoint we create a module. So when there is a CRUD endpoint like /api/users we create a users module.
The file structure of each module should look like this
module-x/
├── collections/
│ └── modules.collection.js
├── controllers/
│ └── modules-index.controller.js
├── directives/
│ ├── templates/
│ │ └── modules-selector.directive.template.html/
│ └── modules-selector.directive.js
├── i18n/
│ ├── de_DE.json
│ └── en_US.json
├── modals/
│ ├── templates/
│ │ └── modules-selector.modal.template.html/
│ └── modules-selector.modal.js
├── models/
│ └── module.model.js
├── services/
│ └── modules.service.js
├── styles/
│ ├── modules-index.style.scss
│ └── modules-selector.style.scss
├── templates/
│ └── modules-index.template.html
├── _module-x.scss
├── module-x.js
└── module-x.routes.js
For the and the _module-x.scss the same rules apply as for the main.scss:
Only import files, do not define styles here.
Define your submodule in the module-x.js and configure it (register i18n files, register response/toast handlers,...). routes should be defined in the x-module.routes.js
The main module should define all global application styles and configure all global handlers.
The styles should be defined in the styles/_main.styles.scss.
The handlers should be defined in the main.js. There are already some handlers registered that will be explained later.
In the folder main/controllers/main.controller.js is the controller that is used in the index.html