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.
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.
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):
spring.datasource.url=jdbc:h2:mem:testdb spring.datasource.driverClassName=org.h2.Driver spring.datasource.username=sa spring.datasource.password= hibernate.dialect=org.hibernate.dialect.H2Dialect
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.
After that – create a new Angular App:
ng new my-app
Changing your directory to the newly generated app – add SQ-UI:
npm i @sq-ui/ng-sq-ui@latest --save
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.
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.
Demonstration of my tool could be viewed in the following video: