Reusable components in AngularJS
I was finally able to solve this. It is pretty easy after your read the documentation and play around
Here is the directive:
angular.module('components', []).directive('category', function () {
return {
restrict: 'E',
scope: {},
templateUrl: '/Scripts/app/partials/CategoryComponent.html',
controller: function ($scope, $http, $attrs) {
$http({
url: "api/FeaturedProducts/" + $attrs.catName,
method: "get"
}).success(function (data, status, headers, config) {
$scope.Cat = data;
}).error(function (data, status, headers, config) {
$scope.data = data;
$scope.status = status;
});
}
}
});
This this the main page with the same component called multiple times but with different parameter
<ul class="unstyled">
<li>
<category cat-name="Ultrabooks"></category>
</li>
<li>
<category cat-name="Tablets"></category>
</li>
<li>
<category cat-name="Laptops"></category>
</li>
<li>
<category cat-name="Digital SLR Cameras"></category>
</li>
CategoryComponent.html
<a href="#/Categories/{{Cat.CategoryName}}">
<h4>{{Cat.CategoryName}}</h4>
</a>
<div ng-switch on="status">
<div ng-switch-when="500" class="alert alert-error">
{{status}}
{{data}}
</div>
<div ng-switch-default>
<ul class="unstyled columns">
<li class="pin" ng-repeat="p in Cat.Products">
<a href="#/reviews/{{p.UPC}}">
<h5>{{p.ProductName}}</h5>
<img src="{{p.ImageUrl}}">
</a>
</li>
</ul>
</div>
</div>