OTA YHTEYTTÄ

Ora Hanttu

Tuoteryhmäpäällikkö, ICT

040 582 6008 Lähetä viesti

Kesto: 2 päivää
Veroton hinta (+ alv 24 %): 1 490 €
Voit maksaa:
Koulutuskortti

Haluatko koulutuksen asiakaskohtaisena? Jätä yhteystietosi, niin palaamme asiaan. 

Jaa

Lataa pdf-muodossa

AngularJS

Koulutuksessa käydään läpi käytännön esimerkkien kautta web-sovelluskehityksessä yleisesti käytettyyn AngularJS JavaScript-kirjastoon. Osallistujien on mahdollista tutustua kurssin aikana myös muihin vastaaviin kirjastoihin, kuten esimerkiksi Knockout.js tai Ember.js.

Kurssin aihepiirit käsitellään luentojen ja demonstraatioiden (~50%) ja käytännön ohjelmointiharjoitusten (~50%) avulla.

HTML5-tuen laajentuessa eri alustoille web-teknologioista on tullut varteenotettava vaihtoehto kehitettäessä niin sanottuja cross-platform -sovelluksia sekä mobiili- että työpöytäalustoille. Suurin etu HTML5, JavaScript ja CSS3 -tekniikoiden käytöstä alustojen omien ohjelmointikielten sijasta saavutetaan siinä, että sama koodi saadaan toimimaan ilman suuria muutoksia monessa erilaisessa päätelaitteessa.

Web-ympäristössä kaikki ei kuitenkaan ole niin ruusuista, kuin ensi näkemältä vaikuttaisi. Modernit web-sovellukset toteutetaan käytännössä lähes täysin JavaScriptillä ja voivat sisältää tuhansia rivejä JavaScript-koodia (niin sanotut Single-Page Applications tai SPA:t). Kuten yleisesti tiedetään, on JavaScript melkoisen konstikas ohjelmointikieli, joten helposti ylläpidettävän koodin tuottaminen ja hallinta varsinkin suurissa projekteissa on usein erittäin hankalaa. Tästä syystä projekteissa lähes aina käytetään apuna valmiita apukirjastoja ja viitekehyksiä (framework) työmäärän vähentämiseksi ja laadukkaan model-view-whatever -rakenteen (MV*) saavuttamiseksi.

Yksi suurimmista haasteista web-sovellusten kohdalla on valinnan vaikeus: mikä monista apukirjastoista tai viitekehyksistä olisi kulloinkin paras valinta omaan projektiin? Riittääkö jQuery? Tarvitaanko myös kaksisuuntaista data-binding -mekanismia ja syötteen validointia käyttöliittymän ja datamallin välissä? Entäpä apua näkymien hallintaan ja niiden välillä navigointiin, HTML-koodipohjia, tai vaikkapa apua AJAXin ja HTTPRestin käyttöön datan noutamiseksi palvelimelta? Muiden muassa Knockout.js, Ember.js ja AngularJS ovat suosittuja vaihtoehtoja auttamaan näissä ongelmissa.

Kurssi alkaa lyhyellä esittelyllä kurssilla tarvittaviin tekniikoihin kuten MV*, SPA, HTTPRest, JSON ja kaksisuuntainen data-binding -mekanismi. Yleiskatsauksen jälkeen sukellamme syvemmälle AngularJS-kirjaston syövereihin ja toteutamme askel askeleelta dynaamisen web-sovelluksen AngularJS:ää apuna käyttäen. Ohjelmointiharjoitusten yhteydessä tutustumme myös syvemmin alussa esiteltyihin tekniikoihin ja niiden oikeaoppiseen käyttöön.

Kurssilla kehitettävä sovellus rakentuu valmiin Node.js:llä toteutetun HTTPRest-palvelimen päälle. Tietokantana käytetään oletuksena MongoDB-kantaa. Sekä palvelin että tietokanta ovat kuitenkin täysin osallistujien muokattavissa.

Asiakassovelluksesta on tarjolla yksityiskohtaiset ohjeet ja esimerkkiratkaisu AngularJS-kirjastolla toteutettuna. Osallistujat voivat kuitenkin halutessaan käyttää mitä tahansa muutakin apukirjastoa hyväkseen kirjoittaessaan omiin tarpeisiinsa sopivaa sovellusta (Knockout.js, require.js, jQuery, tai vastaavat).

Kohderyhmä

Sovelluskehittäjät, jotka haluavat syventää käytännön osaamistaan modernien web-sovellusten kehityksessä yleisesti käytettävien tekniikoiden, viitekehysten ja apukirjastojen osalta (SPA, HTTPRest, JSON, AngularJS ja vastaavat).

Esitiedot

Hyvä JavaScript-kielen hallinta on erityisen tärkeää: Tieturin "JavaScript-ohjelmoinnin jatkokurssi" tai vastaavat tiedot. Useimpien JavaScript-kirjastojen oppiminen sujuu paljon kivuttomammin, mikäli JavaScriptin funktioiden, olioiden, this-avainsanan, sulkeumien (closures) ja muuttujien käyttö on tuttua.

Osallistujien tulee myös osata tuottaa jonkin verran HTML(5) ja CSS(3) koodia – vaadittu taso riippuu kehitettävän sovelluksen käyttöliittymän toteutuksesta.


Ohjelma


1. päivä - AngularJS perusteet

Katsaus SPA-tekniikoihin

  • Single-Page Applications
  • HTTPRest
  • JSON
  • Model-View-Whatever

AngularJS käyttöönotto

  • Bootstrap
  • Yksinkertainen controller-komponentti

Sovelluksen modularisointi

  • AngularJS moduulit
  • Moduulijaon suunnittelu

Listojen käsittely

  • ngRepeat-direktiivi

AngularJS suodattimet (filters)

  • Suodattimien toiminta
  • Valmiit AngularJS-suodattimet (filter, number, currency, ...)
  • Suodattimien käyttö DOM:ssa ja JavaScriptillä

Palvelukomponentit (services)

  • Service- ja conttoller-komponenttien erot
  • Valmiit palvelukomponentit
  • Esimerkkinä $http-palvelu AJAXin toteutukseen

Dependency Injection (DI)

  • DI-mekanismin tarkoitus
  • Vaihtoehtoiset DI-syntaksit

Näkymien hallinta ja reititys

  • Useamman näkymän käyttö
  • Reitityksen hallinta

Muita hyödyllisiä direktiivejä

  • ngBind
  • ngSwitch
  • ngShow, ngHide
  • ngSrc, ngHref



2. päivä - AngularJS syventävä osuus

AngularJS sivumallit (templates) ja omat direktiivit

  • Sivumallien koostaminen ngInclude-direktiivillä
  • Omien direktiivien toteutus

Promise-olioiden käyttö

  • Deferred- ja promise-käsitteet JavaScriptissä
  • AngularJS:n promise-oliot

$resource-palvelu

  • HTTPRest-rajapinnan käyttö $resource-palvelun avulla
  • $resource-palvelun laajentaminen omilla funktioilla

Omien palvelukomponenttien toteutus (custom services)

  • Uudelleenkäytettävät palvelut
  • Singleton-mallin merkitys
  • Esimerkki: controllerien välinen kommunikointi oman palvelukomponentin avulla

Scope-käsite pintaa syvemmältä

  • Nested scopes
  • Isolate scopes

AngularJS parhaat käytännöt (tips and tricks)

  • Moduulien config- ja run-osiot
  • Scope-perintä vs. controllerien perintä
  • Minifiointikäytännöt
  • AngularJS:n käyttö vanhemmissa IE-selaimissa

Muut SPA ja AngularJS -piirteet

  • HTTPRest-rajapinnan suunnittelu
  • AngularJS animaatiot
  • AngularJS yksikkötestaus