angular-crud

    2.0.1 • Public • Published

    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:

      { 
          "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:

      <li>
        <a routerLink="hotels">
          <i class="ti-arrow-top-right"></i>
          <p>Hotels</p>
        </a>
      </li>
    8. Switch to the project's root and start the application:

      npm start
      
    9. Open http://localhost:4200 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:

    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

    Install

    npm i angular-crud

    DownloadsWeekly Downloads

    159

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    83.3 kB

    Total Files

    57

    Last publish

    Collaborators

    • manfred.steyer
    • mraible