Wie wird die richtige Behälterkomponente mit Angular hergestellt?

Question

Im Projekt, das ich dort arbeiten, sind Liste „Manipulation Kontrollen“, wie:

Die Teile dieser Kontrollen sind die gleichen bei 90% der Seiten. So denke ich über das Schreiben von "Manipulation Kontrollen" Component, so würde ich nicht Größen auf jeder Seite, nur in Component Vorlage ändern, wenn ich (all diese col-xs-*), oder einfach kopieren/einfügen html für jeden Eingang separat .

<div class="row"> 
     <div class="col-xs-7 form-inline"> 
       <div class="col-xs-9"> 
        <!-- Search input --> 
       </div> 
       <div class="col-xs-3"> 
        <!-- Type select --> 
       </div> 
     </div> 
     <div class="col-xs-5 form-inline right"> 
      <sort-by ng-model="sortBy" ng-change="setCurrentPage(1);" values="{{sortValues}}"></sort-by> 
      &nbsp;&nbsp;&nbsp; 
      <items-per-page ng-model="itemsPerPage" ng-change="setCurrentPage(1);"></items-per-page> 
     </div> 
    </div> 

Ist es eine gute Idee, solche "Container" -Komponente zu machen? Gibt es ein Tutorial, wie es richtig gemacht werden kann (einige der Eingaben sind möglicherweise ausgeblendet, d. H. Die Liste ist klein und es ist keine Paginierung erforderlich, jeder Platzhalter und Titel sind im Allgemeinen eindeutig, so dass viele Variablen übergeben werden können)?

Dies ist mehr oder weniger Architektur Frage, ich bin nicht erfahren in diesem, aber meiner Meinung nach ist die Idee, solche Komponente zu schreiben, gut. Wenn ich mich irre oder die Frage nicht spezifisch genug ist, bitte argumentieren Sie.

Answer 1

Was Sie suchen, ist Angular Richtlinie (https://docs.angularjs.org/guide/directive)

Answer 2

Ja, es ist eine gute Idee, wieder verwendbaren Code in Komponenten zu drehen.

Ja, übergeben Sie Konfigurationsvariablen, wie Sie es für jeden Anwendungsfall anpassen würden. Unter Verwendung von ng-show, ng-hide, ng-if, ng-switch, ng-class, ng-style usw. gibt es viele Möglichkeiten, die Optionen in Ihrer Vorlage zu implementieren.

Wenn Sie eine große Anzahl von Optionen haben, ist es üblich, sie als ein Objekt zu übergeben. (z. B. config="{foo: 'bar', baz: 'biz'}" vs foo="bar" baz="biz").

Answer 3

Ja, es ist eine gute Idee: das ist der Zweck von Direktiven (oder Komponenten, in den neuen 1.5x-Implementierungen): injizieren Sie in Ihrem HTML einige wiederverwendbare Komponenten in einer intelligenten Weise.

Denken Sie, wenn Sie jemals eine Variable an Ihre "Container" binden müssen: Sie können es einfach und ohne Schmerzen tun, indem Sie Direktiven/Komponenten verwenden.

Alternativ, wenn Sie in Ihrem „Container“ jede Form von Logik nicht benötigen, können Sie ng-schließen mit Vorlagen verwenden können HTML in Ihre Seiten zu injizieren, wie folgt aus:

<div ng-include"myContainer.html"></div> 

und irgendwo in Ihre "templates.html" ..

<script type="text/ng-template" id="myContainer.html"> 
    <!-- content --> 
</script>