Question

我有简单的jhipster应用程序，并生成2个实体：Product和Category，显示here。生成器创建页面以分别列出Product和Category数据。

现在，假设我想创建一个将这两个页面组合在一起的新页面：

<div>
    <jhi-alert></jhi-alert>
    <div class="container-fluid">
        <uib-tabset>
            <uib-tab index="0" heading="Category">
                <div>Categories Goes Here..</div>
            </uib-tab>
            <uib-tab index="1" heading="Product">
                <div>Products Goes Here..</div>
            </uib-tab>
        </uib-tabset>
    </div>
</div>

combined.state.js

(function() {
'use strict';

angular
    .module('hipsterappApp')
    .config(stateConfig);

stateConfig.$inject = ['$stateProvider'];

function stateConfig($stateProvider) {
    $stateProvider

    .state('combined/product-and-category', {
        parent: 'entity',
        url: '/combined/product-and-category',
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'Combined Product and Category'
        },
        views: {
            'content@': {
                templateUrl: 'app/entities/combined/combined.html',
                controller: 'CombinedController',
                controllerAs: 'vm'
            }
        }
    });
}
})();

我的问题是，如何重新使用products.html和categories.html中的网页，以便将其包含在combined.html中？

我尝试使用ng-include，如：

<div ng-include src="'app/entities/category/categories.html'"></div>

包含该页面，但未显示数据。有什么想法吗？

感谢。

编辑1：

我将combined.html更改为ui-view，如下所示：

<uib-tab index="0" heading="Category">
    <div ui-view="category"></div>
</uib-tab>
<uib-tab index="1" heading="Product">
    <div ui-view="product"></div>
</uib-tab>

并更改combined.state.js：

.state('combined', {
    parent: 'entity',
    url: '/combined/product-and-category',
    data: {
        authorities: ['ROLE_USER'],
        pageTitle: 'Combined Product and Category'
    },
    views: {
        'content@': {
            templateUrl: 'app/entities/combined/combined.html',
            controller: 'CombinedController',
            controllerAs: 'vm'
        },
        'category': {
            templateUrl: 'app/entities/category/categories.html',
            controller: 'CategoryController',
            controllerAs: 'vm'
        },
        'product': {
            templateUrl: 'app/entities/product/products.html',
            controller: 'ProductController',
            controllerAs: 'vm'
        }
    }
});

有了这个，页面/模板（products.html和categories.html）根本就不会显示。

Answer 1

您可以定义组合状态以管理2个视图，请参阅angular-ui router doc。

Answer 2

我是这样做的：我有两个实体：

productDelivered
类别

在一页author.html上。我创建了/ src / main / webapp / app / authorization /文件夹。我复制了/ src / main / webapp / app / entities / product-delivered /：
产品delivereds.html
product-delivered.state.js
产品delivered.service.js
产品delivered.controller.js

并将其名称从产品交付更改为授权，以及在theese文件内部交付产品的一些实例，例如：

(function() {
    'use strict';
    angular
        .module('barfitterApp')
        .factory('Authorization', Authorization);

    Authorization.$inject = ['$resource', 'DateUtils'];

    function Authorization ($resource, DateUtils) {
        var resourceUrl =  'api/authorization/:id';

在authorization.controller.js中添加了Category：

    AuthorizationController.$inject = ['$scope', '$state', 'Authorization', 'ProductDelivered', 'Category', ...
function AuthorizationController ($scope, $state, Authorization, ProductDelivered, Category, ...

和

    vm.categories = [];
...

            Category.query(function(result) {
                vm.categories = result;
            });

并在来自category.html

的底部内容中添加的authorization.html中

在Jhipster Application

2 个答案: