GeneratorApp creating Angular [ SQ-UI and Spring Back-End] Interface

The latest feature I’ve added to my tool GeneratorApp is integration of Angular Front-End using the Simple Quality User Interface Toolkit, created by two colleagues of mine, with the already available Spring Back-End Code Generation. In this article I’m gonna describe the steps to get rapidly basic app up and running.

SQ-UI + Spring Back-End Result

From the Back-End side you need Java (JDK), and as a IDE there are a lot of options. I personally use Eclipse.

Spring offer generation of Empty – Hello World Project. The minimal dependencies that you need for a project my Generator are: JPA, JDBC, Web, Rest Repositories and a Java Database Driver – in my case H2. Feel free to add any other dependency as you need.

Spring Initializr

After you have the project, download, extract it, import it in Eclipse.

The GeneratorApp requires the root folder of your project to generate code – the one containing the src folder, the pom.xml file and others.

Depending on the selected option for Database Layer in my GeneratorApp, you may need db.properties file in the src/main/resources folder containing the following lines – for the Hello World phase (feel free to change them accordingly):

After creating some models, some properties, saving them and generating – you should have a very basic Spring Back-end App with Web Page and Rest Interface – with the feature to create, remove, update, delete the types of records you have defined in the GeneratorApp.

Next for the Angular Front-End you’ll need NodeJS after that Angular in the local JavaScript repository npm install -g @angular/cli

You could apply the required changes in the project yourself, but If you have chosen SQ-UI Theme in the Angular Platform within my GeneratorApp, they will applied for you during the Generation of the Angular Files for your Data Models and Properties.

After You’ve generated an Angular Platform – Data Models, you just need to add somewhere the newly generated components so they could be loaded into the app.

I Like Internationalized Apps, so the code output of my Tool is using a global JavaScript object located in the window[‘transss’] to get the string labels displayed to the User.

Yes, I know it is not the standard way implemented in Angular for Internationalization, this approach has less features, but in my opinion – it is simpler and better. Changing the language could be implemented by loading an object into this variable, according to cookie or local storage value.