Combine 2 angular pages in Jhipster Application

问题

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.

回答1:

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

回答2:

I did it in this way: I have two entities:

productDelivered
category

on one page authorization.html. I created /src/main/webapp/app/authorization/ folder. I copied there files from /src/main/webapp/app/entities/product-delivered/:
product-delivereds.html
product-delivered.state.js
product-delivered.service.js
product-delivered.controller.js

and changed their names from product-delivered to authorization and some instances of product-delivered inside of theese files as well, like:

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

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

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

In authorization.controller.js added Category:

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

and:

    vm.categories = [];
...

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

and in authorization.html added at the bottom content from category.html

来源：https://stackoverflow.com/questions/40279006/combine-2-angular-pages-in-jhipster-application

标签

javascript

html

angularjs

jhipster