AngularJS - Ivan Vučičević

Izrada hibridnih mobilnih
aplikacija temeljenih na
angular.js
Ivan Vucicevic, BetaWare Osijek 2014.

Što trebamo znati?
 Potrebno predznanje javaScript-a
 Potrebno znanje HTML-a

Zašto Angular?
 Ako želimo napravit dinamičku web ili mobilnu aplikaciju Angular je odličan izbor
 Angular nam jako dobro strukturira i organizira kod javaScript-a
 Angular nam omogućuje izradu jako brzih web stranica
 Angular se ponaša odlično pri radu s jQuery-em
 Angular nam pruža lako održavanje software-a
 Angular proširuje HTML s novim atributima
 Angular je savršen za SPA
 Jednostavan za učenje

Što Angular čini tako brzim?
Server
Url zahtjev na server
Odgovor servera s web stranicom HTML + JS
Korisnik klikne na link

Što Angular čini tako brzim?
Server
Korisnik klikne na link
Odgovor servera s JSON podacima
Podaci se
učitavaju u
postojeću
stranicu

Što je Angular u stvari?
 Open-source JavaScript framework koji se izvršava na strani klijenta
 Održavan je od strane googla
 Nastao 2010.
 Slijedi MVC kako bi olakšao i ubrzao razvoj
 Koristi tzv. direktive
 Two-way data binding ($scope)
 Moćni templating HTML-a

Kako koristiti Angular s našom web ili
mobilnom aplikacijom?
 Vrlo jednostavno
 CDN
 Direktno

Moduli u Angularu
 Moduli su gdje pišemo dijelove naše aplikacije, te na taj način držimo kod enkapsuliranim
 Zbog takvog pristupa kod nam je lakše održiv i čitljiv
 Također u modulima definiramo ovisnosti ostalih modula za našu aplikaciju

Moduli u Angularu
var ngApp = angular.module('ngApp', [‘module2‘, ‘module3']);
app.js

Pisanje izraza u Angularu
 ng-app direktiva je definirala cijeli HTML kao angular aplikaciju
 Na taj način omogućeno nam je pisanje izraza unutar vitičastih zagrada

Primjeri direktiva (najčešće korištenih)
 ng-app – dodavanje Modula angular aplikacije stranici
 ng-controller – dodavanje funkcije kontrolera stranici
 ng-show/ng-hide – Prikaz/skrivanje elementa ovisno o vrijednosti modela
 ng-repeat – ponavljanje za svaki element niza (foreach)

Filteri u Angularu
 Angular biblioteka u sebi sadrži mnoge filtere koji se pozivaju „pipe” operatorom
(currency, datetime, number, orderBy)
 Mogućnost izrade custom filtera

<img> tag
 Problem prilikom učitavanaja slike iz niza.

Dupliciranje
Server
ng-include (ajax)
HTML repeating.html
Podaci se
učitavaju u
postojeću
stranicu

Hibridne mobilne aplikacije
 Nativne
 SDK
 Mobilni Web
 PHP, node.js
 Hibridne
 HTML5, JS

Što odabrati?
 Hibridne aplikacije
 Razvoj istovremeno na više platformi
 Brži razvoj općenito
 Pristup većini nativnih komponenti
 Lošije performanse
 Nativne aplikacije
 Najbolje performanse
 Sporiji razvoj
 Specifične za platformu

Što odabrati?
 Hibridne aplikacije su Vaš izbor ako:
 Ciljate na razvoj na više platformi
 Želite koristiti mogućnosti kao što su kamera, geolokacija ili akcelerometar
 Želite aplikaciju koja će raditi i kada nemate pristup internetu
 Ne interesiraju Vas grafičke performanse

Što trebamo znati?
 HTML5, CSS3 (SCSS i LESS)
 HTML5 mobilni framework (OnsenUI, Ionic, IntelAppFramework, jQueryMobile, KendoUI…)
 JS (AngularJS ili jQueryMobile)
 Ako je potrebna komunikacija sa serverom: PHP, ASP …
 CLI (phonegap, cordova, nodejs)

Ionic framewrok
 Besplatan
 Open Source
 Optimiziran za mobilne uređaje
 Zasnovan na angularJS
 Izvrsne performanse
 Phonegap/Cordova
 Koristi vlastite html tagove <ion>

Onsen framework
 Širok spektar gotovih UI komponenti
 Dizajn prilagođen za mobilne uređaje i tablete
 Izvrsne performanse
 Korisit angularJS
 Phonegap/Cordova
 Koristi vlastite html tagove <ons>

Onsen karakteristike
 +Nevjerojatan broj gotovih komponenti
 +Velik broj gotovih templatea ili layouta
 +Monaca (debug)
 -Monaca nije besplatna
 -Gotovi layouti nisu temeljeni na angularu

Ionic karakteristike
 +ionic CLI
 +besplatan
 +Open Source
 +u potpunosti temeljen na angularJS
 +Prepoznavanje platforme
 +Native feel
 -Još uvijek je beta
 -manjak templat-a
 -konstantne nadogradnje

Hibridna aplikacija koja
uploada i pretražuje slike na
flickeru!

Izbor layouta
• Potreban je jedan screen
• Jedan button
• Forma za pretragu

AngularJS - Ivan Vučičević

More Related Content

Viewers also liked (12)

Similar to AngularJS - Ivan Vučičević (10)

More from Kruno Ris (12)

AngularJS - Ivan Vučičević