Client Side Templates
multi-page web apps
- HTML view i podaci se spajaju na serveru te dobiveno se šalje u browser
single-page web apps (u browseru)
- posebno se šalje HTML template i podaci sa servera u browser gdje se spajaju. To su tzv. AJAX apps.
Naredni primjer prikazuje jedan AngularJS template. primjetite kako se ng-controller mora nalaziti unutar ng-app direktive.
Hello World primjer: pokreni primjer » HTML code » Angular code
MVC (Model View Controler)
MVC preuzet is Smalltalk-a 1970.-tih. Model predstavlja podatke, View prezentaciju, a Controler logiku.
View preuzima podatke iz Modela. Na svaki korisnikov klik ili tipkanje Controler može mijenjati podatke u Modelu.
Nakon toga novi podaci iz Modela se predstavljaju u View-u.
To je osnovna koncepcija za MVC pa tako i za AngularJS. U AngularJS Controleri su Javascript klase, a podaci Modela su
smješteni u svojstva objekta. View je DOM (Document Object Model).
Osnovna prednost MVC-a je da se separira code te ga je lakše održavati, ekipno izrađivati itd.
Data Binding
Data Binding je koncept povezivanja podataka u View i Modelu u smislu da je izmjena sinkronizirana. Dakle, ako promjenimo vrijednost u View-u, onda se automatski mijenja i u Modelu. Također vrijedi i obrnuto.
Kod ostalih JS Framework-a to nije slučaj nego se Model i Template spajaju u View samo jednom (bez refresha).
Naredni primjer demonstrira Data Binding. Ukoliko mijenjamo text INPUT polja automatski se mijenja i text unutar P elementa. Primjetite upotrebu ng-model direktive.
Data Binding primjer: pokreni primjer » HTML code » Angular code
Data Binding - jednostavan primjer bez Controllera i Javascripta:
pokreni primjer
» HTML code
Primjetite da je se aplikacija automatski ažurira bez JS Event Listener-a (onchange). Ovdje update podataka dolazi sa stranice tj. točnije iz INPUT polja. Ali to isto vrijedi ukoliko update modela dolazi sa servera. Npr. može se iskoristiti za update rezultata kladionice u realnom vremenu.
Iz gornje slike vidimo da se varijabla (svojstvo objekta) može definirati na tri načina. U INPUT polju sa ng-model. Za prikaz u HTML view-u sa ng-bind ili sa {{}}. Unutar controllera, odnosno modela sa $scope. Sva tri oblika su potpuno ravnopravna pa je svejedno gdje ćemo izvršiti promjenu vrijednosti varijable, jer se istovremeno ažurira u sva tri oblika.
Directive
Direktive u AngularJS omogućavaju da se proširi HTML novim tagovima i atributima. Mogu se korisiti predefinirane direktive (ng-app, ng-controller, ng-model, ng-click ...) ili se mogu definirati vlastite direktive. Direktive omogućavaju izradu Template-a u HTML-u.
Dependency Injection
Modul se može shvatiti kao package (namespace). Iz tog razloga pojedini modul koji kreiramo ne može raditi bez objekata nekog drugog modula.
Dakle ovisi o objektima tog drugog modula. Zato se to zove dependency injection.
Jedan od primjera je tzv. route koji kada želimo kreirati onda u naš modul moramo uvesti dependency injection ['ngRoute'].
Ipak u većini slučajeva dependency injection nije potreban pa se modul kreira samo sa: