在Jhipster应用程序中组合2个角度页面 [英] Combine 2 angular pages in Jhipster Application

问题描述

我有简单的jhipster应用程序并生成两个实体： Product 和 Category ，如这里。生成器创建页面以列出 产品 和 Category 数据。

现在，让说我想创建一个新的页面，将这两页在单页中结合起来：

combined.html $ b

 < DIV> 
< jhi-alert>< / jhi-alert> 
< div class =container-fluid> 
< uib-tabset> 
< uib-tab index =0heading =Category> 
< div>类别Goes Here ..< / div> 
< / uib-tab> 
< uib-tab index =1heading =Product> 
< div>产品Goes Here ..< / div> 
< / uib-tab> 
< / uib-tabset> 
< / div> 
< / div> 
  

combined.state.js

 （function（）{
'use strict'; 
 
 
 .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 =0heading =Category> 
< div ui-view =category>< / div> 
< / uib-tab> 
< uib-tab index =1heading =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'，
控制器：'ProductController'，
 controllerAs：'vm'
 } 
} 
}）; 
  

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

解决方案

您可以定义组合状态来管理2个视图，请参阅 angular-ui路由器文档。

I have simple jhipster application and generate 2 entities: Product and Category as showing here. The generator create pages to list Product and Category data respectively.

Now, let say I want to create new page that combine these 2 pages in single page:

combined.html

<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'
            }
        }
    });
}
})();

My questions is, how do I re-use pages from products.html and categories.html, so that it could be included in combined.html?

I tried to use ng-include like:

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

The page is included, but the data not displayed. Any idea?

Thanks.

EDIT 1:

I changed the combined.html to have ui-view as follow:

<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>

And change the combined.state.js as well:

.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'
        }
    }
});

With this, the page/template (products.html and categories.html) not displayed at all.

解决方案

You can define your combinnd state to manage 2 views, see angular-ui router doc.

这篇关于在Jhipster应用程序中组合2个角度页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！