Upload
sileas
View
69
Download
4
Embed Size (px)
DESCRIPTION
Izrada hibridnih mobilnih aplikacija temeljenih na angular.js. Ivan Vucicevic, BetaWare Osijek 2014. Što trebamo znati?. Potrebno predznanje javaScript -a - PowerPoint PPT Presentation
Citation preview
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
Odgovor servera s web stranicom HTML + JS
Što Angular čini tako brzim?
Server
Url zahtjev na server
Odgovor servera s web stranicom HTML + JS
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
Što je Angular u stvari?
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.
Forme Modeli
Dupliciranje
Repeating.html
Dupliciranje
Server
Url zahtjev na server
Odgovor servera s web stranicom HTML + JS
ng-include (ajax)
HTML repeating.html
Podaci se učitavaju u postojeću stranicu
Prilagođene direktive
Rute / Konfiguracija
Kontroleri
Kontroleri
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 odabrati?
Š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
Index.html
App.js
directives.js
controllers.js
In ction
Hvala na pažnji!