Add custom view to jipster app

Question

I would like to add a custom view to jhipster app on index.html

I already created the link in navbar.html and added the html file along the path src / main / webapp / scripts / app / custom / newView.html

<a ui-sref="newView" data-toggle="collapse" data-target=".navbar-collapse.in"> <span class="glyphicon"></span> <span class="hidden-sm">new view</span> </a> 

When I click the link, it does not work. It probably needs a special route in angular for it, but I can't figure out how to create it. What else should I do?

Answer 1

In addition to another answer, here is another piece of information. Maybe someone else will find this helpful. I had a similar problem with custom view, but only in production. Everything was in dev mode. In production mode, nothing was displayed, and I had this javascript error that read "could not solve ... from state ...". It turns out that my javascript file (where the state is declared) was declared as follows in index.html

 <!-- build:js({.tmp,src/main/webapp}) scripts/app.js --> <script src="scripts/app/app.js"></script> <script src="scripts/app/app.constants.js"></script> ... <!-- endbuild --> <!-- custom --> <script src="scripts/app/pages/quizz/quizz.js"></script> <script src="scripts/app/pages/quizz/quizz.controller.js"></script> 

I deliberately created a separation to make it easier to read. As soon as I moved it so that it was to the end, the problem disappeared. I think this is due to how the application is somehow packaged? I did not watch how he does it.

Answer 2

I understood:

I had to add angularjs route. Created a js src / main / webapp / scripts / app / custom / newv.js file with the following contents:

 angular.module('jCrudApp') .config(function ($stateProvider) { $stateProvider .state('newView', { parent: 'site', url: '/newView', views: { ' content@ ': { templateUrl: 'scripts/app/custom/newView.html', //controller: 'MainController' } } }); }); 

and import the new script into index.html

 <script src="scripts/app/custom/newv.js"></script>