Celerio Angular Quickstart

This Angular quickstart uses Angular Cli to create an application skeleton and Celerio to reverse your relational database schema and generate the Angular + Spring Boot code to access your database content. The generated code covers much more areas than a simple Hello World app (search, pagination, validation, auto-complete, etc.)

To generate an application from our sample database, follow the instructions from the quickstart folder.

Take a look at the generated code for yourself. Out of this sample SQL schema and this Celerio configuration, we generate this code, thanks to these templates.

By default we use a sample H2 database schema. Using your own database schema and database engine is just a matter of configuration. Check as an example our instructions to use MySQL instead of H2.

What to expect?

To see it in action with no effort you may run our sample docker image or watch a screencast. Remember, this is just a generated sample, the idea is to generate your own application using a more realistic database schema.

Sample Docker image

To run the docker image of the sample generated webapp:

docker run -p 8080:8080 nromanetti/celerio-angular-quickstart

Then access it at localhost:8080

Screencast

The following screencast shows you what to expect.

About the project

Our goal is to provide solid code generation templates for advanced Angular CRUD web applications.

Code generation templates are written in Velocity and interpreted by Celerio, an Open Source code generator tool for data-oriented applications.

Here is the folder organization:

• pack-angular folder contains the Celerio code generation templates that are interpreted/copied by Celerio.
• quickstart-conf folder contains the minimal configuration that Celerio needs to generate this quickstart.
• quickstart folder is where you can generate the quickstart.
• quickstart-generated: folder is an already generated quickstart provided here so you can browse the source code even from your phone :)

About the generated code

The generated Angular CRUD web app uses the following technologies/frameworks:

• Angular Cli a command line interface for Angular
• Angular 5 web framework: we try to always use the most recent version
• TypeScript: much easier than JavaScript...
• PrimeNG: Angular components library, we leverage file upload, auto-complete, calendar, tri-state checkbox, server-side pagination, etc.
• Angular Material: Material Design components for Angular apps
• Spring Boot: Java app backend, made easy, we generate REST endpoints, etc.
• Spring Security: basic security by default
• Spring Data JPA: leverage query by example, etc.

Contribute

You may contribute in several ways:

• By reviewing the generated code, are PrimeNG, Angular, Spring Data, Spring Boot, etc. properly used ?
• By trying to generate a project using your own database schema
• By using the generated app and trying to find its limits

You may of course report issues and/or submit pull requests.