Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

AngularJS - Ivan Vučičević

522 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

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!

×