AngularJS Слияние двухстраничного приложения на одной странице

Question

У меня есть двухстраничное приложение, которое получает пользовательский ввод для запроса на одной странице и отображает результат в сетке на другой странице.Я пытаюсь объединить это приложение в одну страницу, где пользовательский ввод в верхней части страницы и в результате сетки в нижней части страницы.Я очень плохо знаком с Angular / Javascripting.Я могу вызвать следующую страницу на кнопке события ng-click, но не уверен, как отобразить на той же странице.Ниже приведен код для двухстраничного приложения

home.html

<div>
  <form name="homeForm">
    <div class="form-group col-md-6 md-padding">
      <div>
        <label style="font-size: medium">Laboratory Name</label>
        <select name="labName" class="form-control" ng-model="request.labName" required>
          <option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
        </select>
        <div style="color:maroon" ng-messages="homeForm.labName.$error" ng-if="homeForm.labName.$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-success" href="Views/Angular/results.html" ng-disabled="!homeForm.$valid" ng-click="createRequest(homeForm)">Submit</button>
        </div>
      </div>
    </div>
  </form>
</div>

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>

А контроллеры выглядят примерно так, как показано ниже

homeController.js

(function() {
  angular.module("app").controller("homeController", homeController);

  function homeController($scope, $rootScope, $location, $window) {
    .........
    $scope.createRequest = function(form) {
      $rootScope.labName = $scope.request.labName;
      $location.path('/results');
    };
  };
})();

resultController.js

(function() {
  angular.module("app").controller("resultsController", resultsController);

  function resultsController($scope, $http, $rootScope,
    uiGridConstants) {

    ....

    $scope.gridOptions.columnDefs = [{
      name: 'RequestID',
      displayName: "Request ID",
      enableColumnResizing: true,
      width: 100
    }];
    var myQuery = "SELECT submitter from request where lab = '" + rootScope.labName + "'";
    var params = {
      query: myQuery
    };

    $http.get('/api/AtRequest', {
        params: params
      })
      .then(
        function(response) {
          $scope.gridOptions.data = response.data;
          $scope.isLoading = false;
        },
        function(response) {
          console.log("Something went wrong");
        }
      );
  };
})();

Answer 1

что-то в этом роде, но учтите, что в этом файле должен быть только один ng-контроллер, а в этом примере это homeController.Если у вас есть ошибка 404, это, вероятно, из-за пути result.html.check, если он находится в правильном пути, который вы назначили для ng-include или нет.

<div ng-controller=homeController>
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
  <div>
    <label style="font-size: medium">Laboratory Name</label>
    <select name="labName" class="form-control" ng-model="request.labName" required>
      <option ng-repeat="lab in labList" value="{{lab.id}}">{{lab.value}}</option>
    </select>
    <div style="color:maroon" ng-messages="homeForm.labName.$error" ng-if="homeForm.labName.$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-success" href="Views/Angular/results.html" 
   ng-disabled="!homeForm.$valid" ng-click="createRequest(homeForm)">Submit</button>
    </div>
  </div>
  </div>
  <div ng-include="'result.html'"></div>
 </form>
</div>

Answer 2

У вас есть несколько способов слияния.Одним из них является использование тега ng-include в вашем файле home.html, и это добавит вашу сетку в файл home.html (рассмотрите правильный путь для файла result.html и не используйте ng-controller в result.html)

<div ng-include="'result.html'"></div>

удалите href из кнопки и обработайте ng-click, чтобы заполнить данные сетки

, затем объедините контроллеры (добавьте содержимое resultController в homeController).

Если вы хотите отделитьфайл контроллеров друг от друга, вы можете создать сервис, который извлекает данные и вызывает их в вашем homeController.