Показать запрос и результат на одной странице

Question

В настоящее время у меня есть двухстраничное приложение, которое позволяет пользователю вводить данные и нажимать «Отправить», и открывается следующая страница с результатом запроса в виде сетки.как показано ниже

home.html

  <form name="homeForm">
<div class="form-group col-md-6 md-padding">
    <div>
        <label style="font-size: medium">From Date</label>
        <p class="input-group">
            <input type="text" class="form-control"
                   id="fromDate"
                   name="fromDate"
                   uib-datepicker-popup="{{format}}"
                   ng-model="request.fromDate"
                   is-open="popup1.opened"
                   datepicker-options="dateOptions"
                   ng-required="true"
                   close-text="Close"
                   alt-input-formats="altInputFormats"
                   required />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
        <div style="color:maroon" ng-messages="homeForm.fromDate.$error"
             ng-if="homeForm.fromDate.$touched">
            <div ng-message="required">This field is required</div>
        </div>
    </div>


    <div>
        <label style="font-size: medium">To Date</label>
        <p class="input-group">
            <input type="text" class="form-control"
                   id="toDate"
                   name="toDate"
                   uib-datepicker-popup="{{format}}"
                   ng-model="request.toDate"
                   is-open="popup2.opened"
                   datepicker-options="dateOptions"
                   ng-required="true"
                   close-text="Close"
                   alt-input-formats="altInputFormats"
                   required />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open2()"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
        <div style="color:maroon" ng-messages="homeForm.toDate.$error"
             ng-if="homeForm.toDate.$touched">
            <div ng-message="required">This field is required</div>
        </div>
    </div>

    <div class="md-padding col-md-6">
        <div class="row form-group">
            <button type="button" class='btn btn-danger' ng-click="clearRequest(homeForm)">Clear</button>
            <!--ng-disabled="!homeForm.$valid" -->
            &nbsp;&nbsp;
            <button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
        </div>
    </div>
</div>
</form>

result.html

<div>
 <h4 class="text-primary">Search Results</h4>
 <div layout="row" layout-sm="column" layout-align="space-around">
    <md-progress-circular md-mode="indeterminate" ng-show="isLoading" md-diameter="150"></md-progress-circular>
</div>
<div id="gridStyle" ng-if="gridOptions.data"
     ui-grid="gridOptions"
     class="myGrid"
     ui-grid-resize-columns
     ui-grid-pagination
     ui-grid-selection
     ui-grid-auto-resize
     ui-grid-cellNav
     ui-grid-exporter>
 </div>
 </div>

Теперь я пытаюсь объединить весь запрос и результат запроса на странице.Как и все входы / кнопки слева и сетка справа.

Добавление кода в Plunker здесь

Нужно ли добавить еще одну HTML-страницуэто будет иметь оба эти HTML, и я должен называть это в app.js?Я очень плохо знаком с AngularJS, не уверен, как я могу это сделать

Answer 1

Асинхронный XHTML и JavaScript (AJAX) можно использовать для размещения всего на одной странице без загрузки другой страницы, что я бы сделал, если бы у вас не было требований отображать результаты на отдельной странице.

Учитывая, что у вас есть type=button для кнопки отправки, похоже, что AJAX был предназначен, поскольку это предотвратит перезагрузку страницы при нажатии кнопки отправки.

По сути, в createRequest()функция, отправить параметры запроса (которые, как представляется, включены в аргумент homeForm) в службу запросов.Когда ответ получен, обновите gridOptions.data, указав значения, которые вы хотите отобразить в таблице ... Angular должен позаботиться об остальном.

Answer 2

Да, вы должны создать компонент представления, который будет включать ваши два компонента, которые станут дочерними компонентами вновь добавленного представления.

Ознакомьтесь с этим учебным пособием, чтобы изучить концепцию.