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 |