1 / 38

Izrada hibridnih mobilnih aplikacija temeljenih na angular.js

Izrada hibridnih mobilnih aplikacija temeljenih na angular.js. Ivan Vucicevic, BetaWare Osijek 2014. Što trebamo znati?. Potrebno predznanje javaScript -a

sileas
Télécharger la présentation

Izrada hibridnih mobilnih aplikacija temeljenih na angular.js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Što trebamo znati? • Potrebno predznanje javaScript-a • Potrebno znanje HTML-a

  3. 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 • Angularnam pruža lako održavanje software-a • Angular proširuje HTML s novim atributima • Angular je savršen za SPA • Jednostavan za učenje

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

  5. Što Angular čini tako brzim? Server Url zahtjev na server HTML + JS Odgovor servera s web stranicom Korisnik klikne na link Podaci se učitavaju u postojeću stranicu Odgovor servera s JSON podacima

  6. Što je Angular u stvari? • Open-sourceJavaScriptframework 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

  7. Što je Angular u stvari?

  8. Kako koristiti Angular s našom web ili mobilnom aplikacijom? • Vrlo jednostavno • CDN • Direktno

  9. 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

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

  11. 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

  12. 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)

  13. 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

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

  15. Forme Modeli

  16. Dupliciranje Repeating.html

  17. Dupliciranje Server Url zahtjev na server HTML + JS Odgovor servera s web stranicom ng-include (ajax) Podaci se učitavaju u postojeću stranicu HTML repeating.html

  18. Prilagođene direktive

  19. Rute / Konfiguracija

  20. Kontroleri

  21. Kontroleri

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

  23. Š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

  24. Š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

  25. Što odabrati?

  26. Š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)

  27. Ionicframewrok • Besplatan • Open Source • Optimiziran za mobilne uređaje • Zasnovan na angularJS • Izvrsne performanse • Phonegap/Cordova • Koristi vlastite htmltagove<ion>

  28. Onsenframework • Širok spektar gotovih UI komponenti • Dizajn prilagođen za mobilne uređaje i tablete • Izvrsne performanse • KorisitangularJS • Phonegap/Cordova • Koristi vlastite htmltagove <ons>

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

  30. Ionic karakteristike • +ionic CLI • +besplatan • +Open Source • +u potpunosti temeljen na angularJS • +Prepoznavanje platforme • +Nativefeel • -Još uvijek je beta • -manjak templat-a • -konstantne nadogradnje

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

  32. Izbor layouta Potreban je jedan screen Jedan button Forma za pretragu

  33. Index.html

  34. App.js

  35. directives.js

  36. controllers.js

  37. In ction

  38. Hvala na pažnji!

More Related