Skip to main content

Getting started with Angular App

What to expect​

The angular-expanders can generate a full front-end applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution. skeleton with back-end REST call support and out-of-the-box CRUDS 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 to project specific requirements. If no CRUD screens are required for a certain DataElement, but the data has to be displayed in some other way, only the back-end REST call support can be added. This will generate a DataElementService and some DataElementModels that can be injected/used everywhere.

We will make extensive use of the default feature anchors to add customisability in regard of appearance of the UI. This makes it possible to override the sensible defaults with a project specific expanderExpanderA unit of generation that combines a data tree instance (functional M1 model) with a template to generate an artifact.. It can be used to e.g.

  • Change the sidebar of the project
  • Change the layout of the complete project or the CRUD pages.
  • Etc.

Setting up your project​

New projects can include an Angular project when using the NS Initializer. If you already have a project and want to add an Angular frontend to it, you can follow this tutorial.

Your first FeatureModule​

For every FeatureModule a folder structure gets expanded:

space-app-angular
├── .expansion-manifest
├── src
.   ├── app
        ├── core
        ├── shared
        ├── auth
        ├── products
        .   ├── components
            ├── constants
            ├── directives
            ├── features
            ├── guards
            ├── models
            ├── pages
            ├── pipes
            ├── resolvers
            ├── services
            .

The example above showcases the always present folders core, shared and auth. Products is a defined FeatureModule and contains a specific folder structure, more information see Folder structure.

A FeatureModule can be created via the µRadiant, the same way as a Component is created.

Adding DataConnectors​

Using only an AngularApp and FeatureModules you can create custom projects whilst keeping the rejuvenationRejuvenationThe core process of harvesting custom code from designated anchors and ext directories, updating model configurations, and re-expanding code artifacts to continuously evolve software without losing custom implementations. benefits for the expanded skeleton. However, it is more interesting to also have an out-of-the-box service to insert, update and retrieve data from our JEE backend applicationApplicationThe overarching model container grouping all components, domain logic, and configurations for an enterprise solution.. This is where the DataConnector comes in, it has a reference to a DataElement for which data needs to displayed and altered. A DataConnector exists under a FeatureModule and can be added using the µRadiant.

A DataConnector will expand a service and filter, sorting, and data models. The service contains methods that can be used to retrieve (filter), edit, add and delete data from the desired DataElement. REST calls are being used that are based on the rest-expanders, this means that the DataElement needs to expose endpoints using a control layerLayerLogical separation of functionality within a single system/application, focused on code organization..

Adding DataViews​

Why only expand a data connection when you can also expand default CRUD pages? Adding a DataView to the FeatureModule that has a reference to the required DataConnector, will expand a list-, add-, edit- and detail-page and other required components.

Table component​

The fieldsFieldA property of a DataElement expanded to a database column and user interface input element. shown in the generated table component are defined by the Info projectionProjectionA tailored subset of fields on a DataElement designed to encapsulate data for a specific technical or functional view. in your Elements model.

You can use the angular.noViewLayer option to hide fieldsFieldA property of a DataElement expanded to a database column and user interface input element. if needed.

See angular.noViewLayer.

Filtering​

See angular.isLinkFilterField.

See angular.defaultFilterField.