Angular-Vorlage in mehrere kleine Vorlagen teilen

In meiner Angular-App versuche ich zu verstehen, was der richtige Weg wäre, um meine Seite in Komponenten aufzuteilen.Angular-Vorlage in mehrere kleine Vorlagen teilen

Die Seite vor der Änderung ist ähnlich:

<div id='settings'> 

    <p class='controlGroup' ng-controller="FirstCtrl"> 
    <label class='control-label'>First Control</label> 

    <div class="control"> 
     <!-- some inputs --> 
    </div> 
    </p> 

    <p class='controlGroup' ng-controller="SecondCtrl"> 
    <label class='control-label'>Second Control</label> 

    <div class="control"> 
     <!-- some inputs --> 
    </div> 
    </p> 

    </p> 


    <button id='saveBtn' class='saveButton' ng-click='saveSettings()'>Save Changes</button> 

</div>

Obwohl die Steuerlogik auf zwei verschiedene Controller getrennt ist, ich will auch ihre Vorlage trennen, so wäre es leicht, sie wieder zu verwenden oder zu verschiebe sie an einen anderen Ort.

Ich sehe viele Möglichkeiten: ng-include, script Tag usw.

Was wäre der richtige Weg, das zu tun?

Quelle

2013-05-06 Roy Tsabari

Sie nicht die richtige Antwort ankreuzen wollen? – Amir

Richtlinien die natürliche Wahl für die Erstellung von wieder verwendbaren Komponenten in Winkel sind: http://docs.angularjs.org/guide/directive

Quelle

2013-05-06 11:58:47

ja aber Richtlinien sind so kompliziert für dieses einfache Problem. Sie sollten mit "wiederverwendbaren" Dingen verwendet werden, die nicht die Ansichten trennen. – Amir

Mit ng-umfassen können Sie verschiedene Vorlagen haben und sie einfach in Teile des DOM injizieren sie verwenden, ist es für die Zeiten gut, wenn Sie wollen Laden Sie verschiedene Ansichten, die auf verschiedenen Situationen basieren, wie das Klicken auf eine Navigationsschaltfläche oder eine Variable. Bitte beachten Sie, dass ng-include auch die Vorlage kompiliert, so dass Sie Controller und andere eckige Features und Anweisungen in der Vorlage verwenden können, hier ein Beispiel aus angularjs docs :

Hier ist Ihr Haupt html:

<!doctype html> 
<html ng-app> 
    <head> 
    <script src="http://code.angularjs.org/1.0.6/angular.min.js"></script> 
    <script src="script.js"></script> 
    </head> 
    <body> 
    <div ng-controller="Ctrl"> 
     <select ng-model="template" ng-options="t.name for t in templates"> 
     <option value="">(blank)</option> 
     </select> 
     url of the template: <tt>{{template.url}}</tt> 
     <hr/> 
     <div ng-include src="template.url"></div> 
    </div> 
    </body> 
</html>

und hier ist die js:

function Ctrl($scope) { 
    $scope.templates = 
    [ { name: 'template1.html', url: 'template1.html'} 
    , { name: 'template2.html', url: 'template2.html'} ]; 
    $scope.template = $scope.templates[0]; 
}

Quelle

2013-05-06 12:04:37 Amir

Angular-Vorlage in mehrere kleine Vorlagen teilen

Antwort

Verwandte Themen