Izrada hibridnih mobilnih aplikacija temeljenih na angular.js

Report
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!

similar documents