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.js - Main script
│ ├── app - App specific components go in here
│ │ ├── 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
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'
}
}
});
});