Podział szablonów kątowych na wiele małych szablonów

W mojej aplikacji Angular próbuję zrozumieć, jaki byłby właściwy sposób podziału mojej strony na komponenty.Podział szablonów kątowych na wiele małych szablonów

strona przed zmianą jest podobny do:

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

Chociaż logika sterująca jest oddzielona do dwóch różnych kontrolerów, chcę oddzielić przysługującego szablonu, tak więc łatwo byłoby je lub ponownego wykorzystania przenieś je do innej lokalizacji.

widzę wiele możliwości: ng-include, script tag itp

Jaki byłby właściwy sposób to zrobić?

Źródło

2013-05-06 Roy Tsabari

nie chcesz, aby zaznaczyć właściwą odpowiedź? – Amir

Dyrektywy są naturalnym wyborem dla tworzenia komponentów wielokrotnego użytku w kątowa: http://docs.angularjs.org/guide/directive

Źródło

2013-05-06 11:58:47

tak, ale dyrektywy są tak skomplikowane dla tego prostego problemu. powinny być używane z takimi, jak powiedziałeś, "wielorazowymi" rzeczami, które nie oddzielają widoków. – Amir

Korzystanie NG-to można mieć różne szablony i po prostu wstrzyknąć je na części swojej DOM go używać, to jest dobre dla czasów, kiedy chcesz ładuj różne widoki na podstawie różnych sytuacji, takich jak kliknięcie przycisku nawigacyjnego lub zmiennej, lub tak, pamiętaj, że ng-include kompiluje również szablon, aby można było używać kontrolerów i innych funkcji kątowych i dyrektyw w szablonie, tutaj jest przykład z dokumentacji angularjs :

Oto Twój główny 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>

i tutaj jest JS:

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

Źródło

2013-05-06 12:04:37 Amir

Podział szablonów kątowych na wiele małych szablonów

Odpowiedz

Powiązane problemy