ngx-hipster

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

• Angular Material schematics - Code references and inspiration.

License

MIT © Vishal Mahajan

Changelog

[0.7.0] - 2020-05-03

Added

• Generate e2e tests to verify the application layout and login support (Session and OIDC).
• Generate e2e tests to verify the entity Create, List, Update and Delete flows.
• GitHub actions to verify the generated code against real world application.
• Sample Spring boot application used in the e2e testing.

Changed

• Support angular v9.1.
• Support comma separated proxy paths in the proxy schematic.
• Upgraded jest, prettier, husky, angular material library dependencies.
• Upgrade demo application.