In Part 1 , and Part 2 of the series, we walked through setting up of project and App.js respectively. In this concluding post, we will look at how the html files are coded.
First, the customer.html file – Pretty straightforward
<H2> Customer Information </H2>
<table>
<tr>
<th>Customer ID</th>
<th>Customer Name</th>
<th>Customer Address</th>
<th>Customer State</th>
<th>Customer Country</th>
</tr>
<tr ng-repeat=”customer in customers”>
<td><a href=”#/{{customer.CustomerID1}}”>{{customer.CustomerID1}}</a></td>
<td>{{customer.CustomerName}}</td>
<td>{{customer.CustomerAddress}}</td>
<td>{{customer.CustomerState}}</td>
<td>{{customer.CustomerCountry}}</td>
</tr>
</table>
Look at the ng-repeat directive. This is what does all the magic here. Recollect, in Part 2 , we coded something like this,
$scope.customers = data.d.results;
$scope is the execution context for expressions. $scope is the glue between application controller and the view. In our case, the view is the HTML file, we already defined the controller, now it is a matter of connecting them together via the $scope variable.
As you would guessed, the orders.html is also simple:
<h2>Orders Page</h2>
<table>
<tr>
<th>Order ID</th>
<th>Order Name</th>
<th>Order Date</th>
<th>Order Ship Country</th>
</tr>
<tr ng-repeat=”ord in orders”>
<td> {{ord.OrderID}}</td>
<td>{{ord.OrderName}}</td>
<td>{{ord.OrderDate | date : format}}</td>
<td>{{ord.OrderShipCountry}}</td>
</tr>
</table>
You can always add in the customer name as the header so it makes sense to list the customer and the orders. That is for you to try out since it is very straightforward 🙂
Once you are done with all this, build your project, and deploy it from Visual studio. You deploy the apps to the apps site collection and you can launch it by clicking on the app name
Happy Coding!!!