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 categories all having the same html template. What I am currently doing is having a single controller load all the Json all at once which is kind of slow. I would like to break it down into sub-views (something like partials in ASP.NET MVC) but each view would make it's own call to the service when it initializes. I would also like to pass the category name as a parameter.

What is the most efficient way of doing it? I also tried with Directives but I am not having any luck keeping the scope separate for each call. Let me know if you need more details.

A working jsfiddle might not be possible as it involves Ajax calls and the service is not online. I will try to post what I can later. — Ketan
– Ketan, Commented Nov 29, 2012 at 16:59
Have a look at this recursive tree directive: plnkr.co/edit/T0BgQR?p=preview . This also has all the data in the beginning but it should be possible to change that to ajax calls. — abhaga
– abhaga, Commented Nov 29, 2012 at 19:17

Ketan · Accepted Answer · 2013-05-09 14:27:00Z

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>

Collectives™ on Stack Overflow

Reusable components in AngularJS

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related