Add custom view to jhipster app

问题:

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 on 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 on the link it doesn't work. Probably it needs a custom route in angular but I can't figure out how to create it. What else should I do?

回答1:

In addition to the other answer, here is another piece of information. Maybe somebody else will find it useful. I had a similar problem with a custom view but only in production. Everything was fine in dev mode. In production mode, nothing would display and I had this javascript error that read "could not resolve ... from state ...". It turns out that my javascript file (where the state was declared) was declared like this 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 had created the separation on purpose, just to make it easier to read. Once I moved it up to have it before endbuild, the problem disappeared. I guess this is related to how the app is packaged somehow? I haven't looked at how it does it.

回答2:

I've figured it out:

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

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 in index.html

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