Composants réutilisables dans AngularJS

Question

Je suis nouveau à l' AngularJS et l'aimer jusqu'à présent. Un problème que je ne trouve aucune documentation est ceci:

J'ai une page avec récurrents HTML, une page de catégorie, avec des sous-catégories ayant tous le même modèle html. Ce que je suis en train de faire est d'avoir un seul contrôleur de charge tout le Json tout à la fois ce qui est un peu lent. Je tiens à le décomposer en sous-vues (quelque chose comme partiels dans ASP.NET MVC) , mais chaque point de vue, faire sa propre appeler le service lorsqu'il s'initialise. Je voudrais aussi le nom de la catégorie en tant que paramètre.

Quel est le moyen le plus efficace de le faire? J'ai aussi essayé avec les Directives mais je ne suis pas du tout avoir la chance de garder le champ distinct pour chaque appel. Laissez-moi savoir si vous avez besoin de plus de détails.

Answer 1

J'ai finalement pu résoudre ce problème. C'est assez facile après avoir lu la documentation et joué

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

    }
}
});
 

Ceci est la page principale avec le même composant appelé plusieurs fois mais avec un paramètre différent

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

Answer 2

Check this out: https://github.com/lucassus/mongo_browser/blob/14779144979e2479697af2596b0538a80fcc8217/app/assets/javascripts/app/directives.js.coffee Voici un modèle pour la directive https://github.com/lucassus/mongo_browser/blob/14779144979e2479697af2596b0538a80fcc8217/public/ng/templates/table_filter.html Et voici un exemple d'utilisation: https://github.com/lucassus/mongo_browser/blob/14779144979e2479697af2596b0538a80fcc8217/public/ng/templates/databases/index.html#L5

En gros, c'est un simple composant réutilisable pour un filtre de table.

Plus d'infos vous pouvez trouver sur http://docs.angularjs.org/guide/directive

Answer 3

Je pense que ce sujet devrait faire partie du tutoriel officiel - avoir des composants réutilisables est une fonctionnalité qui tue. J'ai soumis une demande de tirage pour cela

J'ai aussi blogué à ce sujet