Jhipsterアプリケーションで2つの角ページを結合する

Question

私は単純なジプスターアプリケーションを持っており、ProductとCategoryのように2つのエンティティを生成します。hereです。ジェネレータは、それぞれProductとCategoryのデータをリストするページを作成します。今

、私は単一のページでこれらの2ページを組み合わせた新しいページを作成したいとしましょう：

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

私の質問は、私はどのように、ありますcombined.htmlに含めることができるように、products.htmlとcategories.htmlからのページを再利用しますか？

私のようなng-includeを使用しようとしました：ページが含まれていますが、データが表示されていない

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

。何か案が？

ありがとうございました。

EDIT 1：

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

は、私は以下のようなUIビューを持っているcombined.htmlを変更しました

これで、ページ/テンプレート（products.htmlとcategories.html）はまったく表示されませんでした。

Answer 1

コンビナンド状態を定義して2つのビューを管理できます（angular-ui router docを参照）。

Answer 2

私はこの方法でそれをやった：

• が1つのページauthorization.htmlに

• カテゴリ

  をproductDelivered： 私は2つのエンティティを持っています。 /src/main/webapp/app/authorization/folderを作成しました。

• は、製品納入

• 製品-delivereds.html

• 製品-delivered.state.js： 私はSRC /メイン/ webappの/アプリ/エンティティ/製品-配信/ /そこからファイルをコピーします.service.js

• 製品配信。コントローラ。JS

と同様に、同様の認可および製品納入theeseファイルの内部のいくつかの事例に製品納入から自分の名前を変更：

カテゴリーを追加しましたauthorization.controller.jsで

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

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

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

：

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が追加されました。