Angular on Reactin tavoin käytössämme oleva sovelluskehityksen työkalu. Tämän kirjoituksen tarkoituksena on avata Angularia työkaluna jakamalla se omiin alakohtiinsa ja tarjoamalla lyhyt kuvaus siitä, mitä Angular tarjoaa kyseiselle osa-alueelle. Tekstin alussa on tiivistelmä, jota seuraa yksityiskohtaisempi purku.

Meillä käytössä on Angular 2+, joka on puhtaasti TypeScript-versio. Reactiin verrattuna se sisältää sekä lyhyemmän sovelluksen latautumisajan että erityisen hyvän sopivuuden mobiilikehittämiseen. 

---

Angular tiivistettynä 

1. Googlen kehittämä ohjelmistokehys (framework). Angular on TyperScript-pohjainen sekä verkko- että mobiilisovellusten kehittämiseen tarkoitettu työkalu. Työkaluna Angular on täysin holistinen tarkoittaen sitä ettei sen käyttö vaadi resurssien hakemista muista Angularin ulkopuolisista kirjastoista. 

2. Angularin käyton opettelu vaatii paljon aikaa ja on haasteellista, mikä tekee siitä jo enemmän osaavien ohjelmoijien työkalun. Sen suorituskyky on kilpailukykyinen, erityisesti sen optimoidun tilanmuutoksen paikannuksen puolesta. Toimintaohjeet eivät käy järkeen ellei ohjelmoijalla ole aikaisempaa osaamista Angularista. 

3. Ohjelmointikielinä JavaScript ja TypeScript. Sovellusrakenne on kiinteä, monimutkainen ja komponenttipohjainen. Angularissa on kolme kerrosta. Malline, Ohjaus ja Näkymä. Angular tarjoaa valmiita komponentteja, jotka nopeuttavat sovelluksentekoprosessia.

---

Yleiskatsaus ja universaalisuus

Angular on Googlen kehittämä avoimen lähdekoodin web-ohjelmistokehys. Se pohjautuu TypeScriptiin ja soveltuu sekä yksi- että monisivuisten verkko- ja mobiilisovellusten kehittämiseen.

Omavaraisuus 

Angularin omat ominaisuudet riittävät valmiin sovelluksen tuottamiseen, jolloin se ei vaadi resurssien noutamista muista, Angularin ulkopuolisista kirjastoista. 

Angular sisältää useita eri toimintoja, kuten:

• – datan sidonta
• – komponenttipohjainen reititys
• – projektin luominen
• – kaavakkeiden vahvistamiseen sekä riippuvuusinjektioihin liittyvät funktiot 

Oppiminen

Suurten kirjastojensa vuoksi Angular tarjoaa käyttäjälleen useita eri vaihtoehtoja sekä ongelmanratkaisuun että TypeScriptin käyttöön.

Angularin täydellinen oppiminen voi olla pitkä ja kivinen polku, joka vaatii aikaa ja kärsivällisyyttä. Jotkut ohjelmoijat kokevat Angularissa olevan turhaa syntaksia, joka monimutkaistaa sen opettelua. Lisäksi sen ohjelmistokehyksen ytimessä on monimutkaisia toimintoja, joiden opettelua ei voi välttää.

Jatkuvat päivitykset myös pitävät ohjelmoijan varpaillaan ja pakottavat tämän jatkuvasti uuden opetteluun. Kuitenkin ohjelmoijan saavuttaessa tarvittavan osaamistason, tulee Angularista oivallinen työkalu ja lisäys tämän työkalupakkiin. 

Angular – yhteisö ja yritykset

Kuten mainittu, Angularin on kehittänyt Google, mikä antaa sille välittömästi uskottavuutta työkaluna. Angularia on mukana päivittämässä myös sen ahkera seuraajayhteisö. Google tarjoaa pitkän kantaman tukea Angularille ja on jatkuvasti kehittämässä sitä eteenpäin. Päivitysten nopean tahdin vuoksi niiden dokumentointi tosin jää usein jälkeen. 

Angular on suosittu myös useiden organisaatioiden käytössä. Näiden organisaatioiden joukkoon kuuluvat muun muassa McDonald’s, AT&T, HBO, Apple, Forbes, Adobe, Nike ja Microsoft. Kaikki yllämainitut nimet ovat suuren luokan vaikuttajia, mikä myös lisää Angularin uskottavuutta ja sen meriittejä ohjelmistotyökaluna.  

Suorituskyky

Angularin suorituskyky oli aluksi heikompi kuin esimerkiksi Reactissa, varsinkin kun kehitettävä sovellus on suuri ja monimutkainen.  

Syynä tähän heikompaan suorituskykyyn on osittain Angularin kaksisuuntaisessa datan sitomisessa. (data binding), joka hidastaa sovelluksen suorituskykyä.

Jokaisessa sidoksessa toimii ns. “watcher”, joka valvoo muutoksia sovelluksessa. Tämän vuoksi, mitä enemmän sovelluksessa on on sidoksia, sen enemmän siinä on watchereita, jonka vuoksi prosessistakin tulee vaivalloisempi.

Angularin käyttäjien onneksi uusimpien päivitysten myötä tämä suorituskykyongelma ei ole enää yhtä kriittinen. Angular-sovelluksen koko on myös hieman pienempi kuin esimerkiksi Reactilla tehdyn vastaavanlaisen sovelluksen koko.

Ohjelmointikieli 

Angular voi käyttää JavaScriptiä tai TypeScriptiä. Meillä Zaibatsulla käytetään TypeScriptiä, koska se on kompaktimpaa kuin JavaScript, mikä taas tarkoittaa sitä, että myös koodi on kompaktimpaa: sen läpi on helpompi navigoida ja myös kirjoitusvirheet koodissa ovat helpommin havaittavissa. Lisäksi myös refaktorointiprosessi eli lähdekoodin muuttaminen on myös nopeampaa ja yksinkertaisempaa.

Angular – sovellusrakenne

Angularin rakenne on kiinteä ja monimutkainen, mikä sopii kokeneille ohjelmoijille. 

Angular koostuu kolmesta kerroksesta; malline, ohjaus ja näkymä. Malline-kerroksesta (Model) vastuussa oleva objekti alustetaan Ohjaus-kerroksessa (Controller) ja se esitetään Näkymä-kerroksessa (View).

Sovelluksen koodi koostuu Angularin eri kompotenteista, joista jokainen kirjoitetaan neljään erilliseen tiedostoon. TypeScriptia käytetään komponentin toteutukseen, HTML-tiedostoa määrittämään näkymä, CSS– tiedosto määrittämään tyylilliset piirteet ja erillinen tiedosto testaustarkoitukseen. Angularin komponentit ovat myös uudelleenkäytettäviä.

Käyttöliittymäkomponentit 

Angularissa on sisäänrakennettuna materiaalisetti, joka tarjoaa valikoiman esirakennettuja Material Design -komponentteja. Näihin komponentteihin kuuluu muun muassa erilaisia valmiita nappuloita, asetelmia, indikaattoreita ja pop-uppeja, joita voi käyttää sovelluksessa. Näiden valmiiden komponenttien vuoksi käyttöliittymän kokoonpano on nopeampaa ja yksinkertaisempaa.

Angular – ohjesäännöt 

Angularin syntaksiohjeet ovat monimutkaisia, mikä tekee niistä mahdottomat ymmärtää lukijalle, jolla ei ole aikaisempaa kokemusta tämän teknologian kanssa työskentelystä. Tästä syystä Angular on yleisesti ottaen kokeneempien ohjelmoijien työkalu.

Riippuvuusinjektio

Angularin suurin etu Reactiin nähden on se, että Angular tukee niin kutsuttua riippuvuusinjektiota (dependency injection), jota React ei tue. Tämä riippuvuusinjektio siis mahdollistaa objektien vastaanottavan toisia objekteja, joihin se tulee riippuvaisiksi. Tämän vuoksi Angular mahdollistaa myös eri mittaisten elinkaarten luomisen.

Datansidonta 

Angular toimii kaksisuuntaisella datan sitomisella ja vaihtelevalla datalla. Vaikka vaihtelevan ja vaihtelemattoman datan hyödyt ovat kiivaan keskustelun aihe, on kaksisuuntaisen datan kanssa työskentely helpompaa kuin yksisuuntaisella lähestymistavalla. Samaan aikaan tosin, kaksisuuntainen datan sitominen vaikuttaa negatiivisesti aikaisemmin mainittuun suorituskykyyn, watcherien automaattisen luomisen vuoksi. 

Työkalut 

Reactin tavoin Angularin tukena on useita editointityökaluja. Esimerkkityökaluna Aptana, Visual Studio ja Sublime. Serveripuolen renderöinnissä apuna käytetään Angular Universalia. Angularilla tehdyt sovellukset pystyy myös testaamaan yhdellä työkalulla. Päästä-päätyyn testaamiseen (end-to-end testing) Angularissa voi käyttää Jasminea, Protractoria tai Karmaa. Debug-työkaluna kehitysvaiheessa toimii selainjatke Augury. Angular siis mahdollistaa useiden eri työkalujen käyttämisen tuekseen.