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 roles are listed in the state’s data, and when the role list is empty it means that the state can be accessed anonymously.

The role 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 role:

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