Frontend Architecture

Home » Support Library » Developer Support » Angular Guidelines » Frontend Architecture

Introduction

Application Architecture

Deployment

Permissions

Depends on user roles some UI controls can be disabled or hidden. To control UI control access permission directive can be applied:

 

<button
permission=”submitRequest”
permission-properties=”requestForm”
permission-action=”disable”>
Submit Request
</button>
  • The “permission” property defines actionName from rules list.
    The “permission-properties” contains object that defines current application state. It can be different for all actions.
  • The “permission-action” defines action that should be applied to disabled control. Now it can takes 2 values: “hide” or “disable”.

 

Module

Application consist of modules. Every module is responsible for one functionality. For example, Queues management, Order Creation, Administration etc.

 

Module Structure

All modules have similar structure:

  • module-name
    • [config]
    • module-name.client.config.js
    • module-name.client.routers.js
    • [controllers]
    • [components]
    • module-name.client.controller.js
    • [filters]
    • [module_config]
    • [resources]
      • en.json
    • config.json
    • [services]
    • [views]
    • [components]
    • module-name.view.html
    • module-name.client.module.js

To generate proper module structre, next tool can be used: arkcase-generator.

 

File naming convention

There few types of files in the module. All types of file should follow next templates:

 

File Type File name template Examples
Controllers *.client.controller.js admin.client.controller.js
Configuration *.client.config.js create-queue.client.config.js
Directive *.client.directive.js permission.client.directive.js
Filters *.client.filter.js date.client.filter.js
Module configuration config.json config.json
Resources en.json en.js
Routes *.client.routes.js admin.client.routes.js
Services *.client.service.js edit-dashboard.client.service.js
Views *.client.view.html order.client.view.html

 

Use dashes to separate words in file names.

These file names are incorrect:

File name What is wrong
AmdinDashboard.client.controller.js CamelCase notation was used
admin_dashboard.client.controller.js Underscore is used instead of dash
admin-dashboard.js “client.controller” suffix missed
admin.dashboard.client.controller.js Dot was used instead of dash

 

This file name is correct: admin-dashboard.client.controller.js

 

Module configuration file config.json

This file is located in module_config folder and defines all module’s settings, that can be easy changed without source code modifications. For example: grid’s column width, pagination size, position in Navigation menu etc. There are only few settings that required and have predefined format.

Property name Description
id Unique Module Identifier.
title Module’s title. Is visible only in administration panel
menus Defines menus items if required.
components Array of module’s components

 

Menus Settings

There are few predefined menus in the system:

  • topbar – Typically used for new items creation
  • leftnav – Defines native way to get access to module from left navigation panel
  • usermenu – Menu that opens on user profile click.

All of these menus have same items format:

 

{
“menuId”: “leftnav”,
“menuItemURL”: “custom-module”,
“menuItemTitle”: “Custom module”,
“iconClass”: “glyphicon glyphicon-asterisk”,
“position”: 100
},

 

Property Description
menuId Menu identifier. One of these values: topbar, leftnav, usermenu
menuItemURL Module state URL, that will be opened on menu item click.
iconClass Class of icon that can be added to item menu. Typically this is icon from bootstrap glyphicon or font-awesome collections
position Number of position in menu. Less number means first position