Using AngularJS

Project Structure

JHipster client code can be found under src/main/webapp/scripts, it is structured similarly to projects generated by angular-fullstack.

webapp
├── index.html                        - Application starting page that loads everything
├── bower_components                  - Dependencies retrieved by bower
├── assets
│   ├── fonts                         - Fonts
│   ├── images                        - Images
│   ├── styles                        - CSS stylesheets
├── scripts
│   ├── app                           - App specific components go in here
│   │   ├── app.js                    - Main script
│   │   ├── app.constants.js          - Constants generated by build
│   │   ├── main
│   │   │   ├── main.js               - Component's definition like a state/route
│   │   │   ├── main.controller.js    - Component's controller
│   │   │   ├── main.html             - Component's view
│   │   │
│   ├── components                    - Our reusable components, non-specific to our app
│   │   ├── navbar
│   │   │   ├── navbar.js
│   │   │   ├── navbar.controller.js  
│   │   │   ├── navbar.directive.js
│   │   │   ├── navbar.html
│   │   ├── util                      - Generic components like filters to format data
├── i18n                              - Translation files

When generating a new entity Foo with yo jhipster:entity Foo the following front-end files get generated under src/main/webapp:

scripts
├── app
│   ├── entities
│   │   ├── foo                           - Main location of the CRUD front-end for Foo
│   │   │   ├── foos.html                 - View to display the list of Foo entities
│   │   │   ├── foo-detail.html           - View to display details of one Foo entity
│   │   │   ├── foo.js                    - States for list and details
│   │   │   ├── foo.controller.js         - Controller of the list view
│   │   │   ├── foo-detail.controller.js  - Controller of the detailed  view
├── components
│   ├── entities
│   │   ├── foo
│   │   │   ├── foo.service.js            - Service to access the Foo REST resource
i18n
├── en
│   ├── foo.json                          - English translation of Foo name, fields, ...
├── fr
│   ├── foo.json                          - French translation of Foo name, fields, ...

Authorizations

JHipster uses angular-ui-router to organize the different parts of your client application.

For each state, the required authorities are listed in the state’s data, and when the authority list is empty it means that the state can be accessed anonymously.

The authority names are defined in server’s class AuthoritiesConstants.java.

In the example below, the ‘sessions’ state can be accessed only by authenticated users who have ROLE_USER authority:

angular.module('hipster2App')
    .config(function ($stateProvider) {
        $stateProvider
            .state('sessions', {
                parent: 'account',
                url: '/sessions',
                data: {
                    authorities: ['ROLE_USER']
                },
                views: {
                    'content@': {
                        templateUrl: 'app/account/sessions/sessions.html',
                        controller: 'SessionsController'
                    }
                }
            });
    });

Notification System

JHipster uses ui-bootstrap alerts for the notification system, and has an i18n-capable AlertService which can be used throughout the generated applications. By default JHipster will show success notifications whenever an entity is created/updated/deleted and error notifications when there is an error caught from the response. To show a custom notification or alert, use the below methods after injecting the AlertService to your controller, directive or service.

The shorthand methods success, info, warning and error will have a timeout of 5 seconds, for other configurations use the add method:

angular.module('jhipsterApp')
    .controller('SampleController', function($scope, $translate, AlertService) {

        AlertService.success("This is a success message, it is green");

        AlertService.info("This is an info message, it is blue");

        AlertService.warning("This is a warning message, it is amber");

        AlertService.error("This is an error message, it is red");

        AlertService.success("i.will.be.translated");
        // where key i.will.be.translated needs to be in global.json

        AlertService.success("i.will.be.translated", {param: someParam});
        // where key i.will.be.translated needs to be in global.json and can have a { param } which will be replaced by `someParam`

        AlertService.add({
            type: "success", // can be success, info, warning and error
            msg: msg,
            params: params, // parameters to pass for translation
            timeout: timeout // how long to show the alert in milliseconds
        });

        AlertService.clear();  // clear all alerts

        AlertService.get(); // get all open alerts

    });