@waguy02/angular-crud

Generating advanced Angular CRUD APPLICATIONS WITH CUSTOMS CLIS

Usage no npm install needed!

<script type="module">
  import waguy02AngularCrud from 'https://cdn.skypack.dev/@waguy02/angular-crud';
</script>

README

angular-crud

Generating CRUD applications with the Angular CLI and Schematics.

Scaffold files for CRUD

Scaffold List

Scaffold Detail View

## Tutorial: Getting Started 1. Clone this repository. ``` git clone https://github.com/manfredsteyer/angular-crud ``` 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. 2. Install the needed npm packages: ``` cd demo npm install ``` Note, that this also installs `angular-crud`. 3. Switch to the folder `src/app` and create a sub-folder `hotel` with a file `model.json`. Put the following content into this file: ```json { "title": "Hotel", "entity": "hotel", "api": { "url": "http://www.angular.at/api/hotel" }, "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. 4. In your project's root directory, run the following Angular CLI based command: ``` ng g angular-crud:crud-module hotel ``` 5. Now, you get files generated for managing hotels. 6. Have a look to the generated files 7. Open the file `sidebar.component.html` and add a link to the generated route: ```html
  • Hotels

  • ``` 8. Switch to the project's root and start the application: ``` npm start ``` 9. Open and switch to the menu item `Hotels`. 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. ## Extending angular-crud You can fork this repo and extend the generated code using Schematics. Infos about how to use Schematics can be found here: - [Generating Custom Code With The Angular CLI And Schematics](https://softwarearchitekt.at/post/2017/10/29/generating-custom-code-with-the-angular-cli-and-schematics.aspx) - [Automatically Updating Angular Modules With Schematics And The CLI](https://softwarearchitekt.at/post/2017/12/01/generating-angular-code-with-schematics-part-ii-modifying-ngmodules.aspx) ## Call for Contributions - Validation - Navigating between Records - Lookups with dropdown fields etc. - Configure Base URL - Supporting more field types (date, checkbox etc.) If you want to contribute one of those features or other features feel free to reach out. Let's join forces to provide a great solution! ## More Information - [Angular Workshops and Trainings](https://www.softwarearchitekt.at)