Jak mogę połączyć usługę z szablonu w AngularJS?

Question

Mam usługa, która zwraca obiekt JSON, że to sprawia, dla zwięzłość powiedzmy, wygląda to tak:

.service ('levelService', function() { 

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

}) 

myślę, że jest w porządku, ale chcę go używać teraz, w szablonie. Obecnie mam coś takiego:

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

Jak mogę uruchomić Ng-init, aby teraz korzystać z usługi? Czuję, że to, co należy zrobić, to dodać usługę do kontrolera, ale jest to poza jakimkolwiek kontrolerem. Czy muszę utworzyć nowy kontroler dla tego obszaru lub czy mogę bezpośrednio odwoływać się do usługi?

Answer 1

Tak, najlepiej byłoby utworzyć kontroler.

Ideą architektury aplikacji MVC jest ścisłe łączenie obiektów i klas. Wstrzyknięcie usługi do kontrolera, a następnie dodanie kontrolera dodając levels do $scope oznacza, że ​​twój HTML nie musi martwić się, skąd bierze dane.

Ponadto, korzystając ng-init w ten sposób jest chyba w porządku na pukanie się bardzo szybki prototyp, ale to podejście nie powinno być stosowane w produkcji kodu (dane Twojego modelu sama jest ściśle sprzężona do widoku w HTML).

Wskazówka: Dobrym pomysłem może być użycie kontrolera do kontenera nadrzędnego swojej dropdown-menu (tj. Strony/sekcji), a następnie użycie dyrektywy dla samego siebie. Pomyśl o dyrektywie jako elemencie widoku.

Ogólnie pomocne mogą okazać się samouczki wideo pod adresem egghead.io.

Answer 2

umieścić usługę w kontrolerze .. Następnie można wywołać usługę w szablonie ..

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