Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including angular-crud with all npm packages installed. Try it out:

angular-crud lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("angular-crud/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

angular-crud v1.0.0

Generating CRUD applications with Angular, the CLI, and Schematics

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free