Prezentacja z meetupu grupy "Uszanowanko Programowanko", tematyka AngularJS: http://www.uszanowanko.pl/angular Autor: Marcin Gajda. Podczas prezentacji poznamy jedną z najlepszych bibliotek do komunikacji Angulara z zewnętrznym API. Dowiemy się jak konfigurować w niej modele oraz jak korzystać z wbudowanego systemu relacji. Dodatkowo sprawdzimy jakie inne dobrodziejstwa skrywa to narzędzie.

1. Angular Restmod
wygodny sposób na komunikację z API
Marcin Gajda
Front-End developer
The Software house

2. Angular Restmod?
● implementuje Active Record
● mapuje dane z REST API na modele
● pozwala korzystać z kolekcji modeli
● automatyzuje tworzenie relacji
REST API – bezstanowy interfejs programistyczny
oparty o model klient - serwer i protokół HTTP.

3. Relacje?
● zależności między obiektami
● obsługa “1 do 1” oraz “1 do n”
● wsparcie dla modeli “inline”
● automatyczne rzutowanie na typ
● generowanie adresów API

4. Konfiguracja Restmoda
● system wstawek
● wstawka może składać się z:
○ ogólnej konfiguracji ($config)
○ uchwytów zdarzeń ($hooks)
○ rozszerzeń ($extend)
○ ustawień dla atrybutów
● podział na:
○ konfiguracja globalna
○ konfiguracja “per definicja”

5. Ogólne ustawienia ($config)
Pozwala na ustawienie m.in:
● nazwy klucza głównego
● źródła metadanych
● głównego adresu API
wow such configurable

6. Hooki ($hooks)
● niczym Angular interceptors
● pozwalają:
○ modyfikować żądanie przed wysłaniem
○ zmieniać w locie odpowiedź
○ sterować parsowaniem odpowiedzi
○ globalnie reagować na błędy API

7. Duża ilość do wyboru
● before-create
● after-create
● after-create-error
● before-save
● after-save
● after-save-error
● before-update
● after-update
● after-update-error
● before-destroy
● after-destroy
● after-destroy-error
● before-request
● after-request
● after-request-error
● before-fetch
● before-fetch-many
● after-feed
● after-feed-error
● after-fetch-many
● after-fetch-many-error
● after-init
● after-remove
● before-render

8. Rozszerzenia ($extend)
● nadpisywanie metod Restmoda
● dodawanie nowych metod
○ do statycznego interfejsu
○ dla modeli
○ dla kolekcji

9. Sterowanie atrybutami
● wartości domyślne
● maskowanie atrybutów
● ustawienia (de)serializacji
● konfiguracja relacji
Może przykład?

10. Przykładowy scenariusz
● API udostępnia:
○ informacje o muzykach
○ informacje o płytach
● Dodatkowo można:
○ osobno pobrać historię zespołu
○ szukać artystów po nazwach
● API wymaga tokenu

11. Globalna konfiguracja
module.config(['restmodProvider',
function (restmodProvider) {
restmodProvider.rebase("MyAPIStyle");
restmodProvider.rebase({ ... })
}
]);
Api Style - globalna konfiguracja która
dostosowuje modele do stylu API

12. Piszemy API Style:
module.factory('MyAPIStyle', function (restmod) {
return restmod.mixin('DefaultPacker', {
$config: {
primaryKey: "id",
jsonMeta: "meta"
},
$extend: {...}, $hooks: {...}, ...
});
})

13. Ustawiamy token autoryzacyjny
module.config(['restmodProvider',
function (restmodProvider) {
restmodProvider.rebase({
$hooks: {
'before-request': function (request) {
request.headers["X-Token"] = TOKEN;
return request;
}
}
});
});
})

14. Rzut oka na /artists
{
artist: {
id: 1,
name: "Django Reinhardt",
image: "/img/reinhardt.png",
tags: [
{value: "guitar"},
{value: "jazz"}
]
},
meta: {...}
}
/img/reinhardt.png
GET: /artists/1

15. Tworzymy definicję modelu Artist
module.factory(‘ArtistModel’, function (restmod) {
restmod.model('/artists')
.mix({
$hooks: {...},
$extend: {...},
$config: {name: 'artist'},
// ...
});
});

16. Podstawy korzystania z modelu
var django = ModelArtist.$find(1);
// GET: /artists/1
django.$then(function(model){
console.log( model.image );
// > "/img/reinhardt.png"
});

17. Tworzymy nowy wpis w API...
var newBand = ModelArtist.$create({
name: "Flogging Molly"
});
// POST: /artists

18. … i potem go edytujemy
newBand.image = "/img/shamrock.jpg";
newBand.$save(); // PUT
newBand.$save(["image"]); // PATCH

19. Pobieramy kolekcję modeli...
var bands = ModelArtist.$collection();
bands.$fetch();
// GET: /artists

20. … lub tylko jej fragment
bands = ModelArtist.$search({
name: "Stevie"
}).$refresh();
// GET: /artists?name=Stevie

21. Dodajemy metodę do modelu...
module.factory("ArtistModel", function (restmod) {
restmod.model('/artists').mix({
$extend: {
Record: {
getImagePath: function(){
return API_PATH + this.image;
}
}
},
$config: {...}, $hooks: {...}, ...
});
});

22. … i korzystamy z niej
var image = newBand.getImagePath();
// https://localhost/api/img/shamrock.jpg
Oprócz interfejsu Record można także
rozszerzać intrfejsy List, Scope, Static i inne.

23. Konfigurujemy atrybuty
module.factory(‘ArtistModel’, function (restmod) {
restmod.model('/artists').mix({
image: { init: "/img/default.png" },
albums: { hasMany: "AlbumModel" },
history: { hasOne: "HistoryModel" },
tags: { hasMany: "TagModel" },
$hooks: {...}, $extend: {...}, $config: {...}
});
});

24. Wykorzystujemy relacje
var albums = django.albums.$fetch();
// GET: /artists/1/albums
var history = django.history.$fetch();
// GET: /artists/1/history
var tags = django.tags;
Zakładając, że zdefiniowaliśmy TagModel, HistoryModel, AlbumModel:

25. Podsumowanie - wady
● niedopowiedzenia i błędy w dokumentacji
● modele są zawsze związane z kolekcją
● brak wbudowanych metod hurtowych
● tylko jedno wbudowane API style

26. Podsumowanie - zalety
● sporo możliwości konfiguracyjnych
● wpływ na przebieg działania modułu
● możliwość używania z każdym REST API
● dobrze współpracuje z formularzami
● wsparcie dla relacji

27. Pytania?
marcin.gajda@tsh.io