At the moment, I have a two-page application where users can input data on one page and then submit it. The next page displays the query results in a grid format as shown below:
home.html
https://i.sstatic.net/jbdr1.jpg
<form name="homeForm">
<div class="form-group col-md-6 md-padding">
<div>
<label style="font-size: medium">From Date</label>
...
</div>
<div>
<label style="font-size: medium">To Date</label>
...
</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>
...
<button type="button" class="btn btn-success" href="Views/Angular/results.html" ng-click="createRequest(homeForm)">Submit</button>
</div>
</div>
</div>
</form>
result.html https://i.sstatic.net/heYkX.jpg
<div>
<h4 class="text-primary">Search Results</h4>
...
</div>
</div>
Now, I want to consolidate both the query inputs/buttons and the result grid onto a single page - placing the inputs on the left and the grid on the right.
You can view the code on Plunker by following this link: here
Should I create another HTML page that combines these elements, and then call it in the app.js file? As someone new to AngularJS, I'm uncertain about how to go about this process.