Skip to main content

Angular Single Page App Model

The NS Single Page App is an Angular frontend for your NS applicationNS Application (NSApplication). A pre-built software stack that provides common enterprise application functionality such as CRUD, search, authentication, and business process modeling out of the box., generated by the angular-expandersExpanderA unit of generation that combines a data tree instance (functional M1 model) with a template to generate an artifact.. A separate applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. gets expanded next to the NS applicationNS Application (NSApplication). A pre-built software stack that provides common enterprise application functionality such as CRUD, search, authentication, and business process modeling out of the box.. This applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. makes use of the model-view-viewmodel pattern, and uses either the service API or the standard APIStandard API (stdAPI). A fully generated JAX-RS REST API expanding JSON:API compliant endpoints directly from JEE element models. as its control layerLayerLogical separation of functionality within a single system/application, focused on code organization..

The angular-expandersExpanderA unit of generation that combines a data tree instance (functional M1 model) with a template to generate an artifact. can generate a full frontend applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. skeleton with backend REST call support and out-of-the-box CRUD screens for DataElements. While by default there is extensive code generation, the developer still has the possibility to add custom code in order to comply with project-specific requirements.

The Angular model​

An NS Angular model starts with a single overarching element: the AngularApp. Everything else in the frontend model belongs to it. The AngularApp therefor acts as the parent group for all other elements.

FeatureModules​

Your frontend logic lives in FeatureModules, which are modular, independent parts of the Angular applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution.. You can see a FeatureModule as a collection of related logic, pages and components. For example, when you're making an applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. that acts as the frontend to a webshop, you will probably need to tackle three big aspects, namely user management, product showcase and payment form. These could be three different FeatureModules.

While Components are typically modeled around business capability, FeatureModules do not have to follow this pattern. They also do not have to be modeled one-to-one to Components: CRUD pages for DataElements from several Components can fit together in one FeatureModule. Backend architecture is typically split by domain boundaries, while it can make more sense to group the frontend by user workflow.

Once a FeatureModule becomes too big too reason about or if unrelated business logic is grouped together in one FeatureModule, it should be broken down.

DataConnectors​

A DataConnector represents the link to the data that the Angular applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. can manipulate. It represents the frontend connector layerLayerLogical separation of functionality within a single system/application, focused on code organization. that communicates with other services through a REST API. A DataConnector references a DataElement in the backend: you add a DataConnector for every DataElement you need data from.

A FeatureModule with only DataConnectors gives you data access without any generated screens, for when the data has to be displayed in a custom way.

DataViews​

A DataView acts as a representation of the data that our Angular project can manipulate. Add a DataView for every DataConnector that needs a CRUD user interface. A list-page, details-page, edit-form and add-form is expanded per DataView.