angular-crud

0.1.3 • Public • Published

angular-crud

Generating CRUD applications with the Angular CLI and Schematics.

Scaffold files for CRUD

Scaffoled List

Scaffoled Detail View

Tutorial: Getting Started

  1. Clone the following repo https://github.com/manfredsteyer/angular-crud

    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 angular-crud
    cd demo-cli6
    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 the same folder, 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. Now, we just need to integrate the generated code into the existing application. Of course, this could also be automated by an schematic, but for the time being, we'll do this by hand.

For this, open the file app.module.ts add import the generated HotelModule:

@NgModule({
  imports: [  
    [...]
    HotelModule,
  ],
  [...]
})
export class AppModule {
}

Also, open the file sidebar.component.ts and add a link to the generated route:

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

    npm start
    
  2. Open localhost:4200 and switch to the menu item Hotel. 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

  • Deleting records
  • 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

26

version

0.1.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability