{{announcement.body}}
{{announcement.title}}

Creating an Angular Web App in 1 second

DZone 's Guide to

Creating an Angular Web App in 1 second

In this article, I walk you through some of the changes I have done lately in Magic, such as creating support for referential integrity columns, etc.

· Web Dev Zone ·
Free Resource

I've had some time over the summer to work with Magic. One of the more important features I have implemented, is to make it more easy to use, and especially in regards to referential integrity columns. Watch the video below for an explanation.

This allows you to generate your Angular frontend in 1 second, spend some few hours editing the automatically generated frontend, and have an actual working Angular frontend CRUD app, in roughly half a day. I believe this might be especially interesting for more "raw" database access to your backend's database, in particular for cases where you need to some sort of "advanced GUI" to modify your data, in cases where something goes wrong with your app's data for some reasons. As in, making Magic become your app's secondary app, for editing data items in your database. As a simplified version of something like PHP MyAdmin.

Another thing I have focused on lately, is to make the generated frontend become production ready. With the 5.9.1 release for instance, you can build the system with the Angular AOT flag (Ahead Of Time compilation), and nothing will break. This allows you to immediately create a distribution build from the scaffolded frontend, apply it to your server, and everything simply works out of the box. If you had problems with this previously, feel free to try again, since these parts of Magic are significantly improved lately.

If you have some sort of referential integrity column in one of your tables, this is also significantly simplified, by creating a custom component, you can use for such types of selections. Below is some code to illustrate how this might look like, the way I am doing it in the above video.

HTML
 




x


1
<app-selector
2
  key="locale"
3
  value="description"
4
  [model]="data.entity"
5
  [getItems]="service.languages_Get({})">
6
</app-selector>


The above, assumes you have a "languages" table, that you have scaffolded CRUD endpoints for, where its "read" endpoint can be found using the service.languages_Get invocation. Which of course would be the default service method if you used Magic and Hyperlambda to scaffold your backend.

All in all, not too bad for some weekend development over the summer. If you want to play around with Magic, you can find it at its main website here.

Topics:
.net core 3, angular

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}