Daj Się Poznać #5 Dyrektywa w AngularJS - część 1


W poprzednich częściach projektu Mistrz Makro udało nam sie stworzyć kontroler oraz serwis AngularJS, które pozwoliły naszej aplikacji zapisywać i wyświetlać dane pobrane z pliku JSON. W dzisiejszej części, bardzo krótko opiszę jak planuję stworzyć dyrektywę i jak miałby działać główny mechanizm aplikacji. Utworzymy dyrektywę, która wyświetli nam wszystkie potrzebne informacje z modeli. Zajmiemy się głównie plikiem widoku, który nasza dyrektywa utworzy. Dopiero w kolejnej części sprawimy żeby dyrektywa zadziałała. Zaczynajmy!

Jeśli pobrałeś już moje repozytorium z Githuba, co opisałem w poprzednim poście to możesz teraz przeskoczyć do kolejnego commita, który pokaże Ci kod z tego posta:
$ git checkout b57974c18ad12830b4a67d2bad1c4ba58891f6e3

# Nowa metoda modelu ProductModel

Musimy cofnąć się do poprzedniej części projektu Mistrz Makro, gdzie tworzyliśmy modele dla naszej aplikacji, ponieważ będziemy musieli utworzyć nową metodę. Pozwoli nam ona na wyświetlenie konkretnego produktu, czy dania za pomocą przekazanego id. Plik product.model.js:

 
getQuestion: function(id) {
  if(id < _list.length) {
    return _list[id];
  } else {
    return false;
  }
}

Jeśli podane przy wywołaniu funkcji id jest mniejsze niż ilość elementów tablicy obiektów _list, to zwraca konkretne makroskładniki. Możemy teraz wywołać tą funkcję przykładowo w kontrolerze:

 
console.log(ProductModel.getQuestion(0));

Podany kod wyświetli nam element o indeksie 0 pobrany z pliku JSON.

# Tworzymy widok dyrektywy

Stworzymy teraz strukturę pliku HTML, który zostanie wstrzyknięty do naszego widoku poprzez dyrektywę. Nie będzie jeszcze gotowa do użycia, ponieważ potrzebujemy jeszcze kodu JavaScript, ale tym zajmiemy się w części kolejnej.

 
<div class="container" ng-show="inProgress">
  <div class="row">
    <div class="col-md-12">
      <div ng-show="!quizEnd">
        <img ng-src="/app/images/" alt="">
        <h2></h2>
        <p>Kcal:</p><input type="number" name="macro1">
        <p>Białko:</p><input type="number" name="macro2">
        <p>Węglowodany:</p><input type="number" name="macro3">
        <p>Tłuszcz:</p><input type="number" name="macro4">
        <button ng-click="check()" ng-show="">Submit</button>
      
        <div ng-show="">
          <button ng-click="next()">Next</button>
        </div>
      </div>

      <div ng-show="quizEnd">
        <button ng-click="reset()">Play again</button>
      </div>

    </div>
  </div>
</div>

<div class="container" ng-show="!inProgress">
  <div class="row">
    <button ng-click="start()">Start</button>
  </div>
</div>

Powyższy kod zapisujemy jako macro.directive.html, najlepiej w podfolderze html folderu directive.

Korzystamy tutaj z bootstrapa, a będąc dokładniejszym - z jego grida, który pozwoli na szybkie pozycjonowanie elementów quizu. Jest to jak na razie wstępny zarys, więc jeszcze możemy coś zmieniać w tym kodzie.

 
<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
</div>

Ta część kodu pozwala na stworzenie Bootstrapowego kontenera, wydzielenia pierwszego rzędu elementów oraz określenia jego szerokości na 12 linii z 12 możliwych.

 
<div class="container" ng-show="inProgress">

Parametr ng-show określa czy dany kontener ma być wyświetlony czy ukryty. Jest to zależne od zmiennej inProgress, która określi czy quiz już się zaczął, czy jeszcze jesteśmy na ekranie startowym aplikacji.

 
<div ng-show="!quizEnd">
  <img ng-src="/app/images/" alt="">
  <h2></h2>
  <p>Kcal:</p><input type="number" name="macro1">
  <p>Białko:</p><input type="number" name="macro2">
  <p>Węglowodany:</p><input type="number" name="macro3">
  <p>Tłuszcz:</p><input type="number" name="macro4">
  <button ng-click="check()" ng-show="">Submit</button>

  <div ng-show="">
    <button ng-click="next()">Next</button>
  </div>
</div>

W przypadku jeśli quiz nie jest zakończony, co specyfikuje zmienna quizEnd, aplikacja powinna wyświetlić odpowiedni produkt wyświetlając takie elementy jak: img i name. Dla poszczególnych makroskładników będą to pola input, które są typu number, ponieważ użytkownik będzie musiał wstawić tam odpowiednią liczbę. Pola name pozwolą nam zidentyfikować inputy podczas weryfikacji quizu.

Po naciśnięciu przycisku Submit zatwierdzimy nasze odpowiedzi, które sprawdzi funkcja check(). Po wysłaniu ukryjemy ten przycisk i sprawimy żeby pojawił się kolejny, który pozwoli na przejście do kolejnego zadania w naszym quizie. Będzie to przycisk Next i jego obecnością będziemy manipulować także za pomocą ng-show.

 
<div class="container" ng-show="!inProgress">
  <div class="row">
    <button ng-click="start()">Start</button>
  </div>
</div>

Na samym dole jest ostatni container, który podczas wykonania quizu pojawi się tylko raz, jako ekran początkowy. Użytkownik po wduszeniu przycisku start uruchomi funkcję start(), dzięki której zmienna inProgress typu boolean zmieni swoją wartość na przeciwną i zmieni wyświetlane kontenery inicjując start quizu.

Published: April 16 2017

blog comments powered by Disqus