Angular Generator Overview

Unofficial Content

This is a brief description of the different sources of the Angular Generator.

The Angular generator is a front-end generator. The generated objects run on the browser and communicate with the back-end on the server to get and send information.

The back-end is not generated by the Angular generator; instead, it is generated by one of the existing GeneXus generators, such as the Java, .Net or .NetCore generator. 

Sources of the application (the project)

Every GeneXus object is generated in a separate directory, where all the sources are grouped. This is under the <Model directory>\mobile\Angular\<main>\src\apps folder.

image_201931215235_1_png

The following image is a summary of the generated components for an Angular app:

image_201931216032_1_png

SD panels

For each panel, a component (the fundamental building block of Angular applications) is generated, which consists of three sources:

  • *.component.html : is the layout of the panel. It is an Angular template that represents the layout of UI. It is mainly HTML, and it adds elements and attributes that Angular interprets to perform the bindings with the data model and the specified UI events.
  • * .component.ts : is the particular logic of the panel. It is a TypeScript program. Events are generated here, and the state that is bound to the UI is manipulated here.
  • * .sercvice.ts : is the layer responsible for interacting with the server. It is a Typescript program where communication with the server is generated. Here, the structures are also generated with the data model that the panel will use.

The output of the project is a package that can be downloaded and executed by a browser.

Business Components


For each business component, two objects are generated:

  • * .dt.ts : is the data structure of the BC
  • * .service.ts : is the layer that is responsible for interacting with the server.

Themes

The Theme is generated as a SASS. The GeneXus Theme classes are converted to CSS if possible, or else, to variables that the controls can use to implement the required functionality.

Other objects

In addition to the previous objects, other sources are generated in Angular:

  • app.module : It is the description of the module. It contains the specification required to assemble the package.
  • app.routing : It is the router that manages the state changes related to the navigation. Basically, what it does is that given a navigation route, it determines the component to be displayed.
  • app.settings : Addresses and properties configuration of the application (e.g:, the URL of the services; if you have security or not, etc.)
  • app.component : It is the application homepage.

UI Controls

The control library is implemented in a separate project independent of the Angular generator.