AngularJS selbsterhaltende Direktiven für Designer

Question

Ich arbeite mit einer Webanwendung, die es Designern ermöglicht, Seiten zu erstellen, indem sie html in einer Kombination mit angularjs-Anweisungen schreiben, die von mir und anderen Entwicklern erstellt werden. Ich kämpfe mit dem besten Weg, die Direktiven mit Daten zu füllen.

Der erste Versuch bestand darin, alle Anweisungen vollständig eigenständig zu halten. So eine Produktseite zum Beispiel könnte wie folgt aussehen (mit eigenen HTML um all dies - links für Klarheit out):

<product> 
    <product-information></product-information> 
    <product-image></product-image> 
    <product-quantities></product-quantities> 
    <product-add-to-cart-button></product-add-to-cart-button> 
</product> 

Wenn die Richtlinien Daten benötigen (was fast alle tun) sie einen Dienst nutzen würde Rufen Sie eine Web-API auf und erhalten Sie die Daten, die sie benötigen. Bei diesem Ansatz sind einige Probleme aufgetreten.

1. Die Anweisungen benötigen oft Informationen von einem Elternteil oder Geschwister. Im folgenden Beispiel benötigt product-image wahrscheinlich die ProductID, damit das richtige Image erstellt werden kann. In diesem Fall muss ich darauf vertrauen, dass diese Informationen aus einem querystring-Parameter oder einem Speicher in einem angularJS-Dienst abgerufen werden, der anfänglich von der übergeordneten Direktive gefüllt wird.
2. Viele API-Aufrufe. Mit jeder Anweisung, die eigene API-Aufrufe macht, komme ich jetzt mit Seiten, die 15+ API-Aufrufe zum Laden haben, und das kann mit der Zeit wachsen. Auch wenn viele der Daten eng verwandt sind (sogar in der gleichen Datenbanktabelle). Offensichtlich ist das weniger als ideal.

Also habe ich angefangen, meinen Ansatz mit dem zweiten Durchlauf zu ändern. Nun sind die Direktiven wie eine Baumstruktur aufgebaut, wobei jede Direktive erwartet, dass ihre Datenanforderungen über ein Attribut übergeben werden. Hier ein Beispiel:

<product-image product-url="vm.product.imageUrl" ng-if="vm.product"></product-image> 

Dies löst das Problem # 2 zu viele API und Datenbank-Anrufe aber macht zu viele Interna an die Designer. Jetzt muss der Designer wissen, dass er die Produkt-URL eingibt und muss verstehen, dass hinter den Kulissen ein Produkt steckt. Er muss vielleicht sogar ein bisschen angularJS (ng-if) verstehen. Ich habe dieses Muster auch in Angular2 mit Inputs sehr oft benutzt. Scheint gut für Entwickler, aber nicht für vom Designer verwendete Anweisungen, wir wollen die inneren Abläufe und die Komplexität verbergen und dem Designer die Möglichkeit geben, das Layout zu steuern.

Schließlich erwäge ich, mit dem übergeordneten Controller alles zu füllen, was auf der Seite benötigt werden könnte. Dann verwenden alle untergeordneten Anweisungen nur einen Dienst wie sie jetzt sind, aber anstatt eine API aufzurufen, sind die Daten bereits geladen. Die Anweisungen bleiben einfach und weitgehend eigenständig, aber ihre Daten werden von einem übergeordneten Element ausgelöst. Das einzige Problem, das ich dabei habe, ist, dass wir möglicherweise eine Menge Daten laden, die ungenutzt sind, weil die Richtlinien vom Designer nicht verwendet werden. Aber ich denke, das ist ein notwendiger Kompromiss.

Hat jemand etwas ähnliches gebaut, gibt es irgendwelche möglichen Ansätze, die ich vermisse?

Answer 1

Sie können einen Komponentenbaum mit Ihrem Service verwenden. mit einem Designer-Startfreundlich:

<div ng-app="MyApp"> 
    <product id="1"> 
    <product-image></product-image> 
    </product> 
</div> 

So etwas sorta funktioniert:

angular.module('MyApp', []) 

.factory('api', function($q){ 
    return { 
    loadProduct: function(id){ 
     return $q.when({ 
     id: id, 
    imageUrl: 'http://i2.cdn.turner.com/cnnnext/dam/assets/160407085910-setsuna-main-overlay-tease.jpg' 
    }) 
    } 
    }; 
}) 
.component('product', { 
    transclude: true, 
    bindings: { 
    id: '=' 
    }, 
    template: [ 
    '<div ng-transclude></div>' 
    ].join(''), 
    controller: function(api) { 
    var self = this; 
    this.$onInit = function() { 
     self.data = api.loadProduct(this.id); 
    }; 
    } 
}) 
.component('productImage', { 
    require: { 
    product: '^product' 
    }, 
    bindings: { 
    }, 
    template: [ 
    '<pre>{{ $ctrl.url | json }}</pre>' 
    ].join(''), 
    controller: function() { 
    var self = this; 
    this.url = false; 
    this.$onInit = function() { 
     this.product.data.then(function(data){ 
     self.url = data.imageUrl; 
     }) 
    }; 
    } 
}) 

diesen CodePen Siehe: http://codepen.io/anon/pen/wGmEKP?editors=1011