This is the continuation to my Creating AngularJS service and controller for Products blog and in this blog we will be looking at wiring the ProductService and ProductController to HTML. I have not used any complex AngularJS directives here I am bingding the products array that we retrieve from ProductService in to a table by using ng-repeat directive. Here is the code in the HTML file.
<html>
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-grid/ui-grid.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="HelloWorld.js"></script>
<script src="app/Models/Products/Product.js"></script>
<script src="app/Service/Products/ProductsRepository.js"></script>
<script src="app/Controllers/Products/productController.js"></script>
<script src="app/app.js"></script>
<body ng-app="jaysmodule">
<input type="button" onclick="SayHello();" value="Hello" />
{{30+60}}
<div ng-controller="ProductsController">
<div>
<labl><b> Sample Demo to NG Grid</b></labl>
</div>
<table>
<thead>
<tr>
<th class="productid">Product ID</th>
<th class="productname">Product Name</th>
<th class="productcode">Product Code</th>
<th class="price">Price</th>
<th class="productdecription">Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Products">
<td><input type="text" ng-disabled="saving" title="ID" ng-model="item.ProductId" ng-model-options="{updateOn:'blur'}" /></td>
<td><input type="text" ng-disabled="saving" title="ProductName" ng-model="item.ProductName" ng-model-options="{updateOn:'blur'}" /></td>
<td><input type="text" ng-disabled="saving" title="ProductCode" ng-model="item.ProductCode" ng-model-options="{updateOn:'blur'}" /></td>
<td><input type="text" ng-disabled="saving" title="ProductPrice" ng-model="item.Price" ng-model-options="{updateOn:'blur'}" /></td>
<td><input type="text" ng-disabled="saving" title="ProductDescription" ng-model="item.Description" ng-model-options="{updateOn:'blur'}" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The html output will be as below.
dotnetjaikum.com 
Pingback: Adventure with Typescript and AngularJS | dotnetjaikum