AngularJS - Ivan Vučičević

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!