Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

AngularJS - Ivan Vučičević

523 visualizaciones

Publicado el

Izrada hibridnih mobilnih aplikacija, KulenDayz - prezentira Ivan Vučičević, BetaWare d.o.o.

Publicado en: Software
  • Sé el primero en comentar

AngularJS - Ivan Vučičević

  1. 1. Izrada hibridnih mobilnih aplikacija temeljenih na angular.js Ivan Vucicevic, BetaWare Osijek 2014.
  2. 2. Što trebamo znati?  Potrebno predznanje javaScript-a  Potrebno znanje HTML-a
  3. 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  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
  4. 4. Š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
  5. 5. Š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
  6. 6. Š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
  7. 7. Što je Angular u stvari?
  8. 8. Kako koristiti Angular s našom web ili mobilnom aplikacijom?  Vrlo jednostavno  CDN  Direktno
  9. 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. 10. Moduli u Angularu var ngApp = angular.module('ngApp', [‘module2‘, ‘module3']); app.js
  11. 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. 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. 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. 14. <img> tag  Problem prilikom učitavanaja slike iz niza.
  15. 15. Forme Modeli
  16. 16. Dupliciranje Repeating.html
  17. 17. 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
  18. 18. Prilagođene direktive
  19. 19. Rute / Konfiguracija
  20. 20. Kontroleri
  21. 21. Kontroleri
  22. 22. Hibridne mobilne aplikacije  Nativne  SDK  Mobilni Web  PHP, node.js  Hibridne  HTML5, JS
  23. 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. 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. 25. Što odabrati?
  26. 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. 27. Ionic framewrok  Besplatan  Open Source  Optimiziran za mobilne uređaje  Zasnovan na angularJS  Izvrsne performanse  Phonegap/Cordova  Koristi vlastite html tagove <ion>
  28. 28. 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>
  29. 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. 30. 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
  31. 31. Hibridna aplikacija koja uploada i pretražuje slike na flickeru!
  32. 32. Izbor layouta • Potreban je jedan screen • Jedan button • Forma za pretragu
  33. 33. Index.html
  34. 34. App.js
  35. 35. directives.js
  36. 36. controllers.js
  37. 37. In ction
  38. 38. Hvala na pažnji!

×