Sharing Top Content from the Angular-sphere.

Published: angular-crud — Generating CRUD apps with #Angular, the CLI and Schematics

  • Generating CRUD applications with the Angular CLI and Schematics.
  • Switch to the folder and create a file with following content: { “title”: “Hotel”, “entity”: “hotel”, “api”: { “url”: }, “filter”: [ “city” ], “fields”: [ { “name”: “id”, “label”: “Id”, “isId”: true, “readonly”: true, “type”: “number” }, { “name”: “name”, “type”: “string”, “label”: “Name” }, { “name”: “city”, “type”:…
  • In the same folder, run the following Angular CLI based command: Now, you get files generated for managing hotels.
  • Please note, that you cannot save records with Ids 1 to 5 b/c they are restricted for demos.
  • You can fork this repo and extend the generated code using Schematics.

Generating CRUD applications with Angular, the CLI and Schematics

Generating CRUD applications with the Angular CLI and Schematics.

You could also start with an empty project but this repo contains everything you need to get started quickly: theming, configured routing and a menu. Note, that this also installs . Switch to the folder and create a file with following content: { “title”: “Hotel”, “entity”: “hotel”, “api”: { “url”: }, “filter”: [ “city” ], “fields”: [ { “name”: “id”, “label”: “Id”, “isId”: true, “readonly”: true, “type”: “number” }, { “name”: “name”, “type”: “string”, “label”: “Name” }, { “name”: “city”, “type”: “string”, “label”: “City” }, { “name”: “stars”, “type”: “string”, “control”: “number”, “label”: “Stars” } ] } The generator is using a json5 parser. This means that you can use comments, omit quotation marks and use trailing commas. In the same folder, run the following Angular CLI based command: Now, you get files generated for managing hotels. Switch to the project’s root and start the application: Open and switch to the menu item . You should now see your generated form. Please note, that you cannot save records with Ids 1 to 5 b/c they are restricted for demos.

You can fork this repo and extend the generated code using Schematics. Infos about how to use Schematics can be found here:

This is a early implementation that shows the potential of this approach and provides a wireframe for your own extensions. The following features are planned…

angular-crud

Comments are closed, but trackbacks and pingbacks are open.