2016-10-27 3 views
0

У меня есть простая приложение для jhipster и сгенерированы 2 объекта: Product и Category как показано here. Генератор создает страницы для отображения Product и Category данных соответственно.Объединить 2 угловых страницы в приложении Jhipster

Теперь, скажем, я хочу создать новую страницу, которые объединяют эти 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: { 
      '[email protected]': { 
       templateUrl: 'app/entities/combined/combined.html', 
       controller: 'CombinedController', 
       controllerAs: 'vm' 
      } 
     } 
    }); 
} 
})(); 

Мои вопросы, как я повторно использовать страницы из products.html и categories.html, чтобы он мог быть включен в comb.html?

Я пытался использовать ng-include как:

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

страница включена, но данные не отображаются. Есть идеи?

Спасибо.

EDIT 1:

Я изменил combined.html иметь UI-представление следующим образом:

<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: { 
     '[email protected]': { 
      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' 
     } 
    } 
}); 

При этом страница/template (products.html и categories.html) вообще не отображается.

ответ

1

Вы можете определить ваше состояние combinnd для управления 2 видами, см. angular-ui router doc.

+0

Привет @ Gaël Marziou, см. Мой обновленный ответ. Я думаю, что это в основном потому, что мне не хватает понимания углового -у. Но я понятия не имею, что я пропустил до сих пор. – xsalefter

0

Я сделал это таким образом: У меня есть две сущности:

  • productDelivered
  • категории

    на одной странице authorization.html. Я создал/src/main/webapp/app/authorization/folder. я скопировал туда файлы из/SRC/основные/веб-приложение/приложения/лиц/продукта/доставляемых:

  • продукт-delivereds.html

  • продукт-delivered.state.js
  • продукт доставляемых .service.js

  • продукт-поставляемый.контроллер.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 добавил:

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

и:

vm.categories = []; 
... 

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

и в authorization.html добавлено в нижнем содержании из category.html

 Смежные вопросы

  • Нет связанных вопросов^_^