I have a table which displays list of products. And I display same table for "All products" page and for "My products" page. This is part of this table:
<tr ng-repeat="product in products>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
Both "All products" and "My products" pages has own controllers where I setup the $scope.products variable.
Can I exclude definition of this talbe to separate file and use it for both "All products" and "My products" pages?
Yes you can do it by initializing the products variable in the parent controller... And remember when you use ng-include it creates its own scope , so be careful while using any ng-model for any input in the child file (i.e. the file which is to be included..)
Never assign ng-model to a primitive in the child file
Better refer this : What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Use ng-include. Yes you can create a table.html file with those contents
Or, you can even create an inline angular template
<script type="text/ng-template" id="table.html">
<tr ng-repeat="product in products>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
</tr>
</script>
Then include wherever you want:
<div ng-include="'table.html'"></div>
Create a separate html page first:
table.html
<table>
<tr ng-repeat="product in products>
<td>{{product.id}}</td>
<td>{{product.name}}</td>
</tr>
</table>
Then include it:
<div data-ng-include="table.html"></div>
