AngularJS: JS biblioteka koju razvija Google zvanicni sajt: aktuelna verzija: AngularJS v1.3.6 (MIT licenca)

Transcription

1 AngularJS: JS biblioteka koju razvija Google zvanicni sajt: aktuelna verzija: AngularJS v1.3.6 (MIT licenca) deklarativni stil (za razliku od imperativnog stila jquery biblioteke) zasnovan je na MVC arhitekturi: striktno razdvajanje izmedju podataka (model komponenta), logike aplikacije (controller komponenta) i prikaza podataka korisnicima (view komponenta) AngularJS MVC: model: podaci svojstva JS objekata view: HTML strane / DOM drvo contoller: JS funkcije osnovni termini: direktive: konstrukcije koje prosiruju izrazajnost HTML-a (ng-click, ng-model, myelement, ) moduli: kreiranje imenskog prostora scope: lepak izmedju kontrolera i pogleda data-binding: povezivanje podataka iz modela i sablona * na nivou opsega dependency injection: mehanizam prosledjivanja objekata od kojih funkcije zavise servisi: dodatne funkcionalnosti tipa AJAX poziva AngularJS je prosiriv: mogu se praviti nove direktive, novi servisi, novi filteri, * Sablon je.html strana u kojoj je napravljen prostor za umetanje podataka iz modela; obicno su sa {{}} ili ng-bind obelezeni ovi delovi

2 Direktive: implementaciono to su funkcije koje izvrsavamo nad DOM drvetom da bismo realizovali neku funkcionalnost ng-app: ukazuje Angularu o kojem delu DOM drveta treba da vodi racuna kada se strana ucita, angular obilazi DOM drvo pocevsi od cvora koji sadrsi ovu direktivu i nadalje pridruzuje funkcionalsnosti svim cvorovima za koje pronadje ng direktive unutar njega napomena: radi se sa samo cvorovima-decom, nije moguce raditi sa cvorom- roditeljem ili cvorom-sused samo prvi element koji sa ovom direktivom se automatski bootstrapuje, za sve ostale se mora rucna raditi bootstrap (angular.bootstrap) ng-app direktive se ne mogu ugnjezdavati ng-controller: JS funkcije zaduzene za pojedinjene delove DOM drveta ng-model: omogucava vezivanje izmedju sablona i podataka ng-repeat: omogucava ponavljanje delova DOM drveta ng-init: za inicijalizovanje tj. postavljanje stanja nekih ng-class, ng-class-even, ng-class-odd, ng-show,.. direktive za kontrolu CSS svojstava ng-click, ng-mouseup, ng-change, ng-focus, ng-blur, ng-keyup...: direktive koje odgovaraju JS dogadjajima ng-required, ng-change, ng-maxlength, ng-form, ng-submit,...: direktive koje se koriste u radu sa formama Moduli: Scope: uvedeni sa ciljem da se realizuje modularnost koda nesto nalik imenskim prostorima svaka komponenta aplikacije treba da funkcionise samostalno mehanizam komuniciranja izmedju komponenti komunikacija je dvosmerna sve promene u modelu su vidljive u sablonu i obratno {{ }} nacin vezivanja promenljive u sablonu (pogledu) ili ng-bind u pitanju je obican JS objekat postoji hijerarhija opsega: $rootscope na vrhu hijerarhije (odredjuje ga ng-app direktiva) u okviru kojeg se mogu ugnjezdavati drugi opsezi

3 svaki kontrolor ima svoj opseg Kontrolor: uvodi se ng-controller direktivom na nivou sablona uvodi se controller('ime', function($scope){...}) na nivou modula sluzi da organizuje funkcionalnosti na nivou grupe DOM elemenata Servisi: lenjo instanciranje: kreiraju se samo onda kada su potrebni aplikaciji uvek je rec o Singleton objekti $http za generisanje AJAX poziva factory je funkcija koja se koristi za kreiranje servisa Filteri: moze se uticati na prikaz podataka prilikom ubacivanja u sablon na raspolaganju su filteri za: valute (currency), datume (data), kontrolu dizina razlomljenih delova brojeva (number), konverzije u mala (lowecase) i velika slova (uppercase), rastuci ili opadajuci poredak (orderby), prebacivanje JS objekata u JSON niske (json), filter za izdvajanje elemenata koji sadrze zadati sadrzaj opsta notacija za koriscenje: {{ expression filtername : parameter1 : parameter2:...:parametern }} gde su parameter1, parameter2... parametri sa kojima filteri rade poredak sortiranja, niska po kojoj se filtrira sadrzaj... moze se nadovezivati I veci broj filtera {{ expression filtername1 filtername2. filternamen}} Angular Global API: skup funkcija definisanih na nivou objekta angular za razlicite namene foreach za iteraciju kroz nizove ili svojstva objekata fromjson i tojson za rad sa JSON formatom uppercase i lowercase za transformaciju niski isnumber, isfunction, isstring, isobject, isdate, isarray, isdefined, isundefined... niz funkcija za proveru tipova podataka equals za poredjene objekata

4 Rad sa formama: u Angularu je dozvoljeno ugnjezdavanje formi, koristi se direktiva ng-form kao ime elementa ili kao atribut ng-submit je direktiva kojom se inicira slanje ng-readonly i ng-disabled su direktive koje ogranicavaju vidljivost elemenata za svaku input kontrolu tipa text ili textarea element se mogu definisati atributi: ng-model, name, ng-required, ng-minlength, ng-maxlength, ngpattern, ng-change, ng-trim za svaku input kontrolu tipa checkbox se mogu definisati atributi: ng-model, name, ng-true-value, ng-false-value, ng-change za svaku input kontrolu tipa radio se mogu definisati atributi: ng-model, name, value, ng-change za rad sa select kontrolama su na raspolaganju ng-model, name, ng-required, ng-options, dok se na nivou option elementa moze postaviti ng-selected direktiva za postavljanje elementa obelezenim ili ne u zavisnosti od vrednosti (true/false). Ng-options se koristi za generisanje niza opcija na osnovu zadatog skupa vrednosti (slicno kao ng-repeat) za svako od polja formulara se u obliku ime_forme.ime_polja.svojstvo moze proveriti sledece svojstvo: $pristine vrednost je tru ako kornisnik nije menjao vrednost $dirty vrednost je true ako je korisnik menjao vrednost $valid vrednost je true ako je unos u polje validan $invalid vrednost je true ako unos nije validan $error objekat sa svim validacijama na nivou polja ako je neko od ovih svojstava ispunjeno, AngularJS ce primeniti podrazumevane klase (ako postoje):.ng-pristine {},.ng-dirty {},.ng-valid {} i.nginvalid {}

5 $http servis: omotac oko XMLHttpRequest objekta na raspolaganju su metode $http, $http.get, $http.post, $http.head, $http.put, $http.delete i $http.jsonp $http se moze koristiti i kao opsta funkcija za generisanje HTTP zahteva argument joj je objekat kojim se vrse finija podesavanja. Neka od svojstava objekta su: method url params data headers transformrequest transformresponse cache timeout withcredentials responsetype (text, JSON, blob, string..) prosledjivanje podataka serveru: params: podaci koje se nadovezuju na zadati URL ako je rec o niski, samo se vrsi nadovezivanje, ako je rec o objektu vrsi se svodjenje na format ime1=vrednost1&ime2=vrednost2... a zatim I nadovezivanje data: podaci koji se salju u okviru tela poruke podesavanje header-a: 1. nacin: menjanje $httpprovider svojstva trajne izmene koje uticu na sve HTTP zahteve $httpprovider.defaults.headers.get = { 'content-type' : 'text/json; charset=utf-8' } 2. nacin: kroz objekat koji se prosledjuje kao argument lokalne izmene $http({ method: GET, url: '..', headers: {'Content-Type': 'text/json;charset=utf8'} });

6 transformisanje zahteva i odgovora: podrazumevane transformacije: prilikom slanja podataka u vidu objekata sa data vrsi se serializacija u JSON format podrazumevane transformacije: ako se prilikom ocitavanja odgovora detektuje JSON format, deserijalizuje se nacini da se ovakvo ponasanje promeni: 1. nacin: menjanje $httpprovider.defaults.transformrequest i $httpprovider.defaults.transformresponse svojstava trajne izmene koje uticu na sve HTTP zahteve; ocekivane vrednosti su funkcije 2. nacin: kroz objekat koji se prosledjuje kao argument lokalne izmene $http({ method: GET, url: '..', transformresponse: function(){...} }) u slucaju uspesnog zahteva poziv se zavrsava funkcijom success(data, status, headers, config ) gde su: data podaci status statusni kod servera, headers funkcija za dohvatanje vrednosti hedera data.headers('content-length') config objekat kojim je zahtev generisan u slucaju neuspeshog zahteva poziv se zavrsava funkcijom error(data, status, headers, config) sa istim znacenjem argumenata kao u prethodnom slucaju Funkcije success i funkcija error su deo takozvanog promise objekta mehanizam reagovanja na asinhronost (alternativa su callback funkcije): osim toga sto cine kod preglednijim, motivacija za njihovo koriscenje lezi u maskiranju asinhronih funkcija tako da lice na sinhrone funkcije. To svakako olaksava kontrolu gresaka (u ugnjezdenim asinhronim pozivima) I utice na struktuiranje koda. Svojstva koja promise ima su: ili ce doci do uspeha ili do neuspeha u oba slucaja ce biti pozvane metode koje na njih reaguju pozivi metoda ce biti asinhroni Promis objekte je moguce ulancavati - izuzetak na pocetku lanca ce stici I do kraja lanca

7 pored njih postoji i funkcija then koja ima dve funkcije kao argumente: var promise=$http(...); promise.then(function(data){... success... }, function(data){...error...}); Postoji i servis $q koji omogucava asinhrono izvrsavanje: var deferred = $q.defer(); kreira objekat koji ce se odlozeno/naknadno izvrsiti, a njegovi metodi su: resolve: koji obezbedjuje rezultat deferred.resolve({name: "Ari", username: "@auser"}); reject: koji obezbedjuje razlog neuspeha deferred.reject("can't update user"); notify: za vracanje statusnog koda promisa (nije obavezna) deffered.notify( Percentage: + x); promise: objekat sa pomenutim svojstvima then: funkciju za reagovanje na uspeh/neuspeh catch: funkciju za reagovanje u slucaju izuzetaka finaly: funkcija koja ce se svakako izvrsiti angular. factory('githubservice', function($q, $http) { // get events from repo var geteventsfromrepo = function() { smth... } }); var service = { makemultiplerequests: function(repos) { var d = $q.defer(), percentcomplete = 0, output = []; for (var i = 0; i < repos.length; i++) { output.push(geteventsfromrepo(repos[i])); percentcomplete = (i+1)/repos.length * 100; d.notify(percentcomplete); } d.resolve(output); return d.promise; } } return service;

8 Dependency injection: nacin prosledjivanja objekata komponentama koje od njih zavise I nacin: interno ih kreiramo II nacin: koristimo globalne promenljive III prosledjujemo ih kao argumente kada su nam potrebi (DI) I to tako sto opisujemo od kojih objekata zavisi nasa komponenta prosledjivanje se odvija u vreme izvrsavanja I to injector kreira instance za sve objekte od kojih se zavisi i prosledjuje ih u AngularJS-u to je zadatak $injector servisa: on upravlja kreiranjem instanci za sve komponente ukljucujuci I module, direktive, kontrolere... postoje 3 uopstena nacina: 1. imena stvarnih argumenata funkcije (annotation by inference) nrp. Injector.invoce(function ($scope, Data){...}); 2. koriscenjem $inject (explicit annotation) npr: myapp.controller('mycontroller', function($scope, Data){...}); mycontroller.$inject=['$scope', 'Data']; 3. tzv. linijska anotacija (inline annotation) MyApp.controller('myController', ['$scope', 'Data', function($scope, Data){...}]); u ovom slucaju se argumenti funkcije ne moraju zvati istim imenima $scope I Data jer je naglaseno da je prvi argument $sope, a drugi Data neke od funkcija koje nudi $inject API: annotate() - za ocitavnje imena svih servisa koje treba ubrizgati prilikom kreiranja instanci u toku izvrsavanja get() - za dobijanje instance servisa zadatog imena has() - za proveru da li je servis zadatog imena potrebno ubrizgati instantiate() - za kreiranje novih instanci invoke() - poziva metod I prosledjuje mu argumente iz $injector

9 Prosirivost: Kreiranje novih direktiva: app.directive('messagebox', function(){...}); povratna vrednost konstrukcije je objekat sa svojstvima: restrict: odredjuje da li je rec o elementu E, atributu A, klasi C ili komentaru M ili nekoj njihovoj kombinaciji EA priority: prioritet izvrsavanja (primer ng-repeat) template ili templateurl: sablon po kojem ce se vrsiti prikaz replace: true/false vrednost transclude: mogucnost da se sacuva prethodni sadrzaj elementa scope: dodatni opseg direktive link: function(scope, element, attrs) svojstvokoje omogucava dinamicko pridruzivanje ponasanja elementu controller compile Mogucnost pravljenja novih filtera: app.filter('reverse', function(){...}) povratna vrednost je funkcija koja vrsi transformaciju elementa Literatura: 1. zvaničan sajt: 2. AngularJS by Brad Green and Shyam Seshadri, O Reilly, blog by John Lindquist 4.