Daj Się Poznać #3 JSON. Service i Controller w AngularJS


W trzeciej części projektu Mistrz Makro, który w tym momencie piszę w AngularJS zajmiemy się pierwszą częścią obsługi danych. Stworzymy strukturę danych w pliku JSON oraz serwis, który zwróci te dane do kontrolera. Kontroler natomiast wyświetli je nam w konsoli. W kolejnej części będziemy dalej przesyłać dane, tak by mogły się w aplikacji zapisać, a potem wyświetlić dzięki dyrektywie. 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 64b463ab817cdfb379375a6abb2ca0c616987fcf

# Co to jest JSON?

JSON to skrót od JavaScript Object Notation. Jest to składnia do przechowywania i przesyłania danych. Między serwerem a przeglądarką, możemy przesyłać tylko tekst, a JSON upraszcza nam to, poprzez możliwość łatwej konwersji do obiektu języka JavaScript. Nazwa może być trochę myląca, jednak JSON jest kompatybilny nie tylko z JavaScriptem, ale także wieloma innymi językami.

W naszej aplikacji, musimy pobrać dane, zawierające ścieżki zdjęć produktów do quizu, zarówno jak i wszystkie dane, które użytkownik będzie zgadywał. Stwórzmy więc plik answers.json:

 
{
"questions":[
		{
		  "id": "1",
		  "name": "bułka",
		  "kcal": 600,
		  "protein": 30,
		  "carb": 60,
		  "fat": 6,
		  "img": "img1.jpg"
		},
		{
		  "id": "2",
		  "name": "pizza",
		  "kcal": 900,
		  "protein": 20,
		  "carb": 80,
		  "fat": 20,
		  "img": "img2.jpg"
		}
	]
}

W powyższym kodzie JSON będziemy mieli dwa obiekty, z kluczami i odpowiadającymi im wartościami, które potrzebne będą nam do quizu.

# AngularJS Service

Musimy teraz stworzyć serwis, który odbierze nam ten plik i pozwoli na odebranie go w aplikacji. Plik nazwiemy GetJson.service.js, a wyglądał będzie tak:

 
(function() {
  'use strict';

  angular
    .module('quizProject')
    .service('GetJson', GetJson);

    function GetJson($http) {
      return {
        getData:  function() {
          return $http.get('answers.json').then(function(response) {
        return response.data;
      });
        }
      };
    }
})();

W powyższym kodzie pozwalamy serwisowi zwrócić funkcje getData, która pobiera plik i zwraca jako promise, który odbieramy funkcją .then, która jako parametry przyjmuje najpierw zachowanie w przypadku pozytywnego zakończenia promise a jako drugi argument, zachowanie w przypadku niepowodzenia. W naszym przypadku zwracamy dane, które odbierzemy w kontrolerze.

# AngularJS Controller

Musimy tylko pamiętać, żeby dodać nasz kontroler w pliku index.html, podobnie jak wcześniej robiliśmy to z naszym modułem. Używamy do tego ng-controller="MainController as main" w divie o klasie container:

 
<body>
  <div class="container" ng-controller="MainController as main">
    <h1 class="title">QuizApp</h1>
    <quiz/>
  </div>
</body>

Nasz kontroler będzie wyglądał tak:

 
(function() {
  'use strict';

  angular
    .module('quizProject')
    .controller('MainController', MainController);

  function MainController($scope, GetJson, $http) {

    var promiseAnswers = GetJson.getData();

    promiseAnswers.then(function(data){
      data.questions.forEach(function(answer) {
        console.log(answer.id);
        console.log(answer.name);
        console.log(answer.kcal);
        console.log(answer.protein);
        console.log(answer.carb);
        console.log(answer.fat);
      });
    });
  };
})();

Wstrzykujemy zależność do function MainController($scope, GetJson, $http), dzięki czemu możemy odwoływać się teraz do funkcji z GetJson.

poprzez GetJson.getData(); pobieramy dane z serwisu do zmiennej i następnie odbieramy znów jako promise i odwołujemy się do parametru data. Korzystamy z funkcji forEach, który pozwala nam przeskoczyć po wszystkich argumentach tablicy obiektów questions. Następnie każdą wartość wyświetlamy z osobna w konsoli. Nasz rezultat powinien wyglądać w taki sposób po odpaleniu aplikacji:


Teraz pozostało stworzyć tylko modele, służące do przechowywania danych, oraz umożliwić dyrektywie swobodne korzystanie z nich, jednak to opiszę już w kolejnym poście.

Published: April 02 2017

blog comments powered by Disqus