Skip to content
This repository has been archived by the owner on Feb 2, 2022. It is now read-only.
/ ngx-hipster Public archive

Angular schematics to scaffold production ready angular material applications

License

Notifications You must be signed in to change notification settings

vishal423/ngx-hipster

Repository files navigation

Ngx Hipster

Angular schematics to scaffold production ready angular material applications

Demo

You can try out demo application at https://vishal423.github.io/ngx-hipster/index.html (login with username: admin and password: admin to access the protected pages)

Demo application uses angular in-memory-api to intercept all back-end api calls.

Pre-requisites

This guide assumes that you have already created a new angular cli application with SCSS styles.

ng new sample-angular-app --interactive=false --prefix=app --style=scss --routing=true

Usage

Install ngx-hipster dependency in your project. Default ng-add schematic will prompt to configure your application with the recommended setup.

ng add ngx-hipster

Default configurations:

  • Scaffold angular material shell application with login support. Default security is compatible with JHipster session authentication.
  • Configure prettier
  • Configure Jest
  • Configure proxy

Entity Schematic

  • Scaffold Create, Update, and List (and Delete dialog) screens.
  • Create new json file to describe your entity structure and place that in the project root directory. As an example, consider the following entity.json that represents the structure of a movie entity. For a more elaborate example, refer to the movie.json used in the demo application.
{
  "name": "movie",
  "pageTitle": "Movies",
  "fields": [
    {
      "label": "Title",
      "name": "title",
      "dataType": "string",
      "controlType": "text",
      "validation": {
        "required": true,
        "minlength": 2,
        "maxlength": 20
      }
    },
    {
      "label": "Plot",
      "name": "plot",
      "dataType": "string",
      "controlType": "textarea",
      "validation": {
        "minlength": 100
      }
    },
    {
      "label": "Genre",
      "name": "genre",
      "dataType": "string",
      "controlType": "radio",
      "validation": {},
      "options": [
        {
          "name": "adventure",
          "label": "Adventure"
        },
        {
          "name": "drama",
          "label": "Drama"
        },
        {
          "name": "sci-fi",
          "label": "Science Fiction"
        }
      ]
    },
    {
      "label": "Release Date",
      "name": "releaseDate",
      "dataType": "date",
      "controlType": "date",
      "format": "MM/dd/yy",
      "validation": {}
    }
  ]
}
  • Execute following command from the project root directory to generate entity layout screens. When prompted, specify path to the entity json file (created in the above step):
$  ng g ngx-hipster:entity
? Provide relative path to the entity Json filename movie.json

Acknowledgements

License

MIT © Vishal Mahajan