Aleksandar Plamenac Sadraj Design patterns Preuzimanje Angular JS

Aleksandar Plamenac

Sadržaj • Design patterns • • • Preuzimanje Angular. JS biblioteke i njeno uključivanje View, Controller, i direktive za generisanje HTML-a AJAX pozivi Filteri Servisi Aleksandar Plamenac • MVC pattern 2

Kako se postaje dobar u dizajnu i realizaciji softvera? • • • Funkcionalnost Jednostavnost Održivost Čitljivost Proširivost Ponovno korišćenje Aleksandar Plamenac • Šta znači „biti dobar“ u dizajnu softvera? 3

Kako se postaje dobar u dizajnu i realizaciji softvera? a) Postoji na stotine ovih obrazaca Aleksandar Plamenac 1. Nauče se pravila 2. Nauče se principi 3. Izučiti i analizirati obrasce dizajna drugih profesionalaca 4

MVC pattern Aleksandar Plamenac • Podjela aplikacije na tri logička entiteta: Model, View, Controller 5

Preuzimanje Angular. JS framework-a Aleksandar Plamenac https: //angularjs. org 6

Prvi primjer • ng-app: Definiše i veže Angular. JS aplikaciju za HTML. • ng-model: Vezuje podatke iz Angular. JS aplikacije za HTML input kontrole • ng-bind: Isto kao i ng-model, samo za sve ostale tagove (span, p) Aleksandar Plamenac • Glavni djelovi Angular. JS aplikacije su direktive. 7

Drugi primjer – Angular modul i controller Zavisnosti (od drugih modula) Aleksandar Plamenac • Definicija Angular modula i kontrolera 8

Injekcija kontrolera u HTML Aleksandar Plamenac • Osvrt na ng-app: U suštini, to je ime modula koji se koristi • ng-controller: Ime kontrolera 9

Kako su controller i view povezani? • Na samoj HTML stranici, može se koristiti na dva načina: Aleksandar Plamenac • $scope – „lijepak“ između controller-a i view-a. • Uključuje se pri definiciji samog kontrolera, kao parametar funkcije. 10

Angular direktiva ng-init Aleksandar Plamenac • ng-init se koristi za inicijalizaciju podataka pri učitavanju HTML stranice 11

Angular direktiva ng-repeat Trenutni element Niz kroz koji se iterira Aleksandar Plamenac • Ekvivalent foreach petlji 12

Angular direktiva ng-repeat • Da se izbjegne ovaj problem, pri definiciji ng-repeat direktive koristi se track by $index • $index – promjenljiva koja sadrži indeks trenutnog elementa. Aleksandar Plamenac • Problem kod ng-repeat direktive: Ako su članovi niza primitivni tipovi, ng-repeat neće raditi ukoliko postoje iste vrijednosti u nizu. 13

Aleksandar Plamenac Angular filter i ng-repeat sa kompleksnim objektima 14

Angular direktiva ng-click • Klik događaj na neki element. Aleksandar Plamenac • Kroz samu direktivu se prosljeđuju naredbe koje se izvršavaju na klik. 15

Angular digest cycle • Princip watcher-a i listener funkcije: Listener funkcija Aleksandar Plamenac • Kada dođe do neke promjene u promjenljivoj cities, izvršava se i pridružena listener funkcija Deep watch flag 16

I opet, Angular direktive Aleksandar Plamenac • ng-show: prikazuje kontrolu, ako je vrijednost izraza pod direktivom true • ng-disabled: onemogućiti određenu kontrolu • ng-hide: sakriva određenu kontrolu 17

Angular AJAX Aleksandar Plamenac • Prilikom definicije kontrolera kao parametar funkcije se predaje i $http 18

Osvrt na ono što znamo do sada • Nadogradnja i generisanje HTML-a • Veliki broj predefinisanih Angularovih direktiva • Moguće je definisati i sopstvene direktive Aleksandar Plamenac • ng-app, ng-controller, ng-repeat, ng-show. . . • Prvi iskok iz standardnog MVC pattern-a 19

Kreiranje svoje direktive Aleksandar Plamenac • Obratiti pažnju na davanje imena direktivi pri njenom definisanju, i kasnije njenom korišćenju 20

Povratni objekat direktive • restrict: Na koji način se direktiva može koristiti u HTML-u • template: „Suvi“ HTML koji se generiše, u njemu se mogu i koristiti promjenljive iz kontrolera • template. Url: moguće je izdvojiti generisani HTML u poseban fajl, i referencirati ga • link: Manipulacija DOM objektima Aleksandar Plamenac • E – kao element • A – kao atribut 21

Aleksandar Plamenac Manipulacija DOM objektima u direktivi 22

Definicija svog filtera Aleksandar Plamenac • Pored standardnog korišćenja filtera, moguće je definisati i nove 23

• Način da se koriste funkcije kroz čitav modul • Da bi se određeni servis koristio u kontroleru, potrebno je proslijediti ga kao parametar pri definiciji kontrolera. Tada dolazi do instanciranja servisa i moguće je njegovo korišćenje • U Angular-u već postoje predefinisani servisi: • $http • $timeout • $location Aleksandar Plamenac Angular servisi • Naravno, kao i za filtere, moguće je definisati i svoj servis 24

Aleksandar Plamenac Angular servis 25

HVALA! • Kontakt Aleksandar Plamenac • aleksandar. plamenac 93@gmail. com 26