Komponenty wielokrotnego użytku w AngularJS

Question

Jestem nowy w stosunku do AngularJS i lubię go do tej pory. Jeden problem nie mogę znaleźć żadnej dokumentacji to:

Mam stronę z powtarzającym się HTML, strona kategorii z podkategoriami wszystkie o tym samym szablonie html. To, co aktualnie robię, polega na tym, że pojedynczy kontroler ładuje wszystkie JS-y na raz, co jest dość powolne. Chciałbym podzielić go na podstrony (coś podobnego do stronicowania w ASP.NET MVC), ale każdy widok mógłby wywołać własne połączenie z usługą podczas jej inicjowania. Chciałbym również przekazać nazwę kategorii jako parametr.

Jaki jest najbardziej wydajny sposób na zrobienie tego? Próbowałem także z dyrektywami, ale nie mam żadnego szczęścia, zachowując oddzielny zakres dla każdego połączenia. Daj mi znać, jeśli potrzebujesz więcej informacji.

Answer 1

W końcu udało mi się to rozwiązać. Jest to dość proste Po zapoznać się z dokumentacją i bawić

Oto dyrektywa:

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; 
     }); 

    } 
} 
}); 

ten główna strona z tego samego komponentu o nazwie wiele razy, ale z innym parametrem

<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> 

KategoriaComponent.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>