Reusable components in AngularJS

Question

I am new to AngularJS and liking it so far. One problem I cannot find any documentation is this:

I have a page with recurring HTML, a category page with sub

Answer 1

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

CategoryComponent.html

    
{{Cat.CategoryName}}


    

        {{status}}
        {{data}}
    
    

        

            

                
                    
{{p.ProductName}}