将自定义视图添加到 jhipster 应用程序答案

【问题标题】：Add custom view to jhipster app将自定义视图添加到 jhipster 应用程序
【发布时间】：2015-10-31 13:22:45
【问题描述】：

我想在 index.html 上为 jhipster 应用添加自定义视图

我已经在 navbar.html 中创建了链接，并在路径 src/main/webapp/scripts/app/custom/newView.html 上添加了 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>

当我点击链接时它不起作用。可能它需要一个角度的自定义路线，但我不知道如何创建它。我还应该做什么？

【问题讨论】：

标签： jhipster

【解决方案1】：

除了其他答案，这里还有另一条信息。也许其他人会发现它很有用。我在自定义视图中遇到了类似的问题，但仅在生产中。在开发模式下一切都很好。在生产模式下，什么都不会显示，并且我遇到了这个 javascript 错误，显示为“无法解析 ... 从状态 ...”。事实证明，我的 javascript 文件（声明状态的地方）在 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>

我故意创建了分隔符，只是为了使其更易于阅读。一旦我将它移到 endbuild 之前，问题就消失了。我想这与应用程序的打包方式有关吗？我还没看过它是怎么做的。

【讨论】：

【解决方案2】：

我想通了：

我不得不添加一个 angularjs 路线。创建了一个js文件 src/main/webapp/scripts/app/custom/newv.js，内容如下：

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

并在 index.html 中导入新脚本

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

【讨论】：

我遇到了同样的问题，但只是在生产模式下。你注意到 dev 和 prod 模式之间的区别了吗？