Skip to main content

Getting started

info

This page will explain how to get started through some short examples that generate a default Angular app with CRUDS UI for a DataElement.

What to expect​

The angular-expanders can generate a full front-end application 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 expander. 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.
Disclaimer

The angular-expanders depend heavily on the rest-expanders, so please check these out first if you don't know how they work. The following information assumes that you know about the rest-expanders.

Setting up your project​

To get started, you have to add the angular-expanders or angular-jaxrs-stack as an expansion resource to your application project. This can be done either in the µRadiant, or directly in the expansion settings file. You also need to add a new Program that will act as the root of the AngularApp model.

Expansion resource​

  1. Open the model for your JEE application.
  2. Go the to settings tab.
  3. Add a new expansion resource with name net.democritus.angular:angular-jaxrs-stack and version 5.2.0.

Program​

  1. Open the model for your JEE application.
  2. Go the to Application tab.
  3. Use the Upgrade To Angular Project transmuter to generate a basic setup based on angular-expanders:3.x.x options.

Your first FeatureModule​

You can see a FeatureModule as a collection of related logic, pages and components. For example, when you're making an application that acts as the front-end 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. For every FeatureModule a folder structure gets expanded:

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

The example above showcases the always present Angular modules core, shared and translation. 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 rejuvenation 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 application. 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 be equiped with the proper setup.

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.

Table component​

To customize the fields shown in the generated table component you can use the option angular.isTableColumn.

Option
angular.isTableColumn Field

Marks a Field as column for a DataElement table.

<options>
  <angular.isTableColumn/>
</options>

Filtering​

Option
angular.isLinkFilterField QueryFilterField

Marks a QueryFilterField as a LinkField instead of a string ValueField.

<options>
  <angular.isLinkFilterField/>
</options>
Option
angular.defaultFilterField QuerySearch

Defines the default field name to filter on.

<options>
  <angular.defaultFilterField>name</angular.defaultFilterField>
</options>