Wie kann ich einen Service aus einer Vorlage in AngularJS aufrufen?

Question

Ich habe einen Dienst, der ein JSON-Objekt zurückgibt, die es macht, der Kürze halber können sagen, es sieht wie folgt aus:

.service ('levelService', function() { 

    // service to manage levels. 
    return { 
     levels : [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}] 
    }; 

}) 

Ich denke, das ist in Ordnung, aber ich will es jetzt verwenden, in einer Vorlage. Derzeit habe ich etwas in der Art:

<ul class="dropdown-menu" ng-init="levels = [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}];"> 
         <li ng-repeat="level in levels"> 
     <a ng-href="#/modeling/level/{{level.href}}">{{level.name}}</a></li> 
        </ul> 

Wie kann ich die ng-init jetzt den Service nutzen? Ich fühle mich wie das Richtige zu tun, ist es, den Service der Steuerung hinzuzufügen, aber das ist außerhalb von jedem Controller. Muss ich einen neuen Controller für diesen Bereich erstellen oder kann ich direkt auf den Service verweisen?

Answer 1

Ja, es wäre die beste Vorgehensweise, einen Controller zu erstellen.

Die Idee hinter der MVC-App-Architektur ist, dass Sie Ihre Objekte/Klassen nicht eng miteinander koppeln. Wenn Sie einen Dienst in einen Controller einfügen, bedeutet das, dass Ihr Controller levels zu $scope hinzufügt, dass Ihr HTML sich nicht darum kümmern muss, woher es die Daten bezieht. Das Verwenden von ng-init auf diese Weise eignet sich wohl auch, um einen sehr schnellen Prototyp zu erstellen, aber dieser Ansatz sollte nicht im Produktionscode verwendet werden (da die Daten Ihres Modells selbst eng mit dem HTML Ihrer Ansicht verknüpft sind).

Tipp: Es könnte eine gute Idee sein, einen Controller für den übergeordneten Container Ihrer dropdown-menu (dh die Seite/Abschnitt) zu verwenden und dann eine Richtlinie für Ihre dropdown-menu selbst zu verwenden. Stellen Sie sich eine Richtlinie als eine Sichtkomponente vor.

In der Regel finden Sie die Video-Tutorials unter egghead.io hilfreich.

Answer 2

setzen den Dienst in einem Controller .. Dazu Service in Ihrer Vorlage ..

app.controller('yourCtrl', function($scope, levelService) { 
    $scope.levelService= levelService; 
});