Angular

Angular (tuntud ka kui angular 2+) on TypeScriptis kirjutatud avatud lähtekoodil põhinev veebirakenduste raamistik. Angulari arendajateks on Angulari enda meeskond Googlis ja muud arendajad erafirmadest ja ka erainimesed. Angular on AngularJS-i järglane.

Erinevused AngularJS-ist

Angular on AngularJS-i täielik ümberehitus. Suurimad erinevused Angulari ja AngularJS-i vahel on järgmised:

• Angular on kirjutatud TypeScripti jaoks. TypeScript on edasiarendus Javascriptist ja on seetõttu ka sellega tagurpidi ühilduv. TypeScriptis on kasutusel staatiline tüüpimine, ehk programmi õigsust kontrollitakse enne selle kompileerimist. See vähendab testimise vajadust ja arendusaega. TypeScript on rangem tüüpimise poolest, kuid mugavam ja kui JavaScript pikemas perspektiivis, hõlmates rohkem mugavusi suuremate projektide arenduseks. Objektorienteeritud programmeerimisele mõeldud ehitus ja asünkroonsuse tugi on suurte ja modulaarsete veebilehtede loomisel kasulikud.
• Angluaril ei ole skoopi.^[1] Selle asemel on hierarhiline lähenemine kus muutujad on pärandatud edasi. Eesmärk on luua rohkem objektorienteeritud süsteem kus koodi kasutatakse uuesti koos sisemiste muutujatega.^[2]
• Suur osa AngularJS-i tuumast on Angularis jaotatud lahti eraldi mooduliteks. Nende moodulite eeliseks on modulaarsus. Väiksemad lehed ei pea laadima nii palju asju tuumas ja on seeläbi kiiremad. Sellega kaasneb ka dünaamiline laadimine, ehk lehed laaditakse mällu ainult siis kui neid on vahetult vaja. See vähendab algseks laadimiseks vajaminevat aega.

Arhitektuur

Angulari raamistik on loodud dünaamiliste üheleheküljeliste veebilehtede ehitamiseks. Angular alustala on component ehk komponent, mis lehe funktsionaalsuse ja loogiga DOM-iga. Igal Angular projektil on vähemalt üks komponent milleks on root ehk juur komponent.^[3] Selle sidumise jaoks on fail, kus asub selle komponendi view-i kontrolliv template ja selle template-i käitumist kontrolliv loogika.

Eelneva süsteemi ära tundmiseks ja ülesehituseks kasutatakse metadatat, ehk metaandmeid.^[4] Need on koodi osad mis annavad Angulari koodi kompileerijale teada mis struktuuriga on tegemist.

Lisaks kasutavad komponentid veel service-eid. Service on koodi osa mis ei ole seotud mitte ühegi view-ga otseselt, vaid neid saab lisada teistesse komponentitesse neid inject-ides.^[3] Service kui struktuur aitab ka muuta Angularli rohkem objektorienteerituks.

Komponendid ja service-id on pakendatud kokku module'iteks ehk mooduliteks. Moodul on nagu pakend, mille sees on lehel samas kohas paiknevad elemendid, samaks kasutuseks vajalik loogika või samu väliseid teeke kasutav kood. Igal Angulari veebilehel on oma alus moodul, milleks on root, ehk juur, moodul.^[3] Läbi selle alustab rakendus oma tööd ja seal defineeritakse ära tööks vajalikud järgnevad moodulid. Moodulid saab ka importida teistesse moodulitesse. Nii on Angularis kasutusel objekt orienteeritud struktuur, kus enkapsuleeritud moodulid kutsuvad välja üksteist.

Routing on viis kuidas Angular proovib kasutaja kogemust lehel teha kiiremaks ilma tema märkamata. Routing on mingi view muutmine, kui kasutaja seda nõuab, muutes URL-i. See toimub läbi veebilehitseja lehe muutmise töö muutmise.^[3] See töötab igal viisil nagu alamlehele minemine veebibrauseris, aga on kiirem, sest ei laadita iga kord uut lehte, vaid lihtsalt muudetakse view ja seda tehes DOM.

Routingule saab rakendada ka kasutaja kontrolle. Kui uus veebiaadressi nõue tuleb rountingusse, siis Angularlis on olemas valvurid ehk guard-id. Neid saab kasutada tuues sisse Routing moodul, ja lasevad mugavalt implementeerida kasutaja õigusi.

Versioonide ajalugu

Nimetamine

Algselt kutsuti seda ümberkirjutust Angular neljaks kui see 2016. aastal välja kuulutati. Peale seda otsustati kutsuda Angular 1.x versioone angularJs ja kõik alates Angular 2.0 saati lihtsalt Angulariks.^[1]

Angular 3

Kolm jäeti vahele, sest see oleks tekitanud segadust juba varem avaldatud ruutimispaketiga, mis oli kolmanda versiooni peal.^[1]

Angular 4^[5]

Angular 4 avaldati 2017. aasta märtsis. See oli tagurpidi ühilduv Angular kahega ja ei olnud sellest väga erinev.

• Optimeeringud vähendasid angulari genereeritud koodi mahtu enamasti 60% võrra. Lisaks kompileerimine oli kiirem ja vigu oli vähem.
• Lisati *ngIf ja *ngFor notatsioon, mis lubab lihtsalt kontrollida mingit konditsiooni.
• Ehitati angular.io lehekülg, mis tänapäevani on Angulari dokumentatsiooni ja näidiste ametlik leht.
• Animatsioonid tõsteti tuumast välja. Animatsioonide väljalülitus võimaldati.
• Lisati HttpClient, mis lubab kergemini teha HTTP kutseid.

Angular 5^[6]

• Avaldatud 2017 märtsis.
• Lisati toetus Angular Materialile.

Angular 6^[7]

• Avaldatud 2019 mais.
• Lisati käsurea liides, mis võimaldab käsurealt projektide ja failide malle ehitada.
• Lisatud ng update ja ng add tugi.
• Suurendati Angular Materialsi tunduvalt

Angular 7^[8]

• Avaldatud 2018 oktoober.
• Lisati virtuaalne kerimine, mis laadib ainult pilte, mis on parajasti ekraanil. See lubab teha väga pikki keritavaid loendeid, ilma et leht muutuks aeglasemaks.
• Lisati lohistamine ja lahti laskmine.
• Lisati uusi Materials ja käsurea kasutusi.
• Mitu partner projekti tehti kasutatavaks nagu AngularFire, AngularConsole ja StackBlitz.

Angular 8^[9]

• Avaldatud 2019 mais.
• Lisati diferentsiaalne lehtede laadimine (differential loading), mis tähendab, et olenevalt veebibrauserist laaditakse uuem või vanem JavaScripti versioon. See teeb lehtede laadimise kiiremaks uuemates veebibrauserites.
• Lisati dünaamiline teekide importimine laiskadele lehtedele.
• Alustati Ivy väljalaskega.

Angular 9^[10]

• Avaldatud 2020 veebruaris.
• Ehitati uus kompileerimis ja tööaja jooksutaja Ivy. Ivy pakub lisaks sadade pisivigade parandusele veel väiksemaid faili suurusi arenduse ajal, kiiremat testimist, kiiremat vigade parandamist, paremat CSS stiili ja klassi ühilduvust, paremat tüübi kontrolli ja vähem vigu ehitusel.
• Lisati Youtube ja Google Mapsi komponendid, mis eemaldavad vajaduse kasutada nende väliseid rakendusliideseid.

Angular 10^[11]

• Avaldatud 2020 juunis.
• Lisati uus Materialsi aja valija.
• TypeScripti uuendused ja vanade brauserite toetuste eemaldamine.

Angular 11^[12]

• Avaldatud 2020 novembris.
• Fontide automaatne sisse laadimine, mis optimeerib kompileerimist.
• Üheksandas versioonis lisatud testimise uuendused said veel kasutusi juurde.
• Vajalike teekide importimine tehti 2 kuni 4 korda kiiremaks.
• Kiirem kompileerimine TypeScript neljaga.

Angular Universal

Angular Universal on Angulari eelrenderduslahendus. Angular Universal võimaldab nurgapõhiste veebisaitide jaoks serveripoolset renderdamist. Vaikimisi renderdab Angular rakendusi brauseris. Angular Universal võimaldab Angularil renderdada rakendust serveris, genereerides staatilise HTML-i, mis näitab rakenduse olekut. Kui HTML on brauseris renderdatud, laadib Angular rakenduse ja kasutab uuesti serveris loodud HTML-is saadaolevat teavet^[13].

Viited

1. Michał Dziwoki (30. detsember 2019). "What's the difference between AngularJS and Angular?". Gorrion. Vaadatud 25.01.2021.
2. "Typescript Classes". Typescript docs. 25. jaanuar 2021. Vaadatud 25. jaanuaril 2021.
3. "Introduction to Angular concepts". Angular. Vaadatud 01.25.2021. {{netiviide}}: kontrolli kuupäeva väärtust: |vaadatud= (juhend)
4. Bhavika Garg (26. jaanuar 2019). "Angular Architecture Overview". Vaadatud 25.01.2021.
5. Stephen Fluin (juuli 2017). "AngularJS 2017 Blog". AngularJS Blog. Originaali arhiivikoopia seisuga 26.02.2021. Vaadatud 25.01.2021.
6. Paul Krill (18. september 2017). "Angular 5 JavaScript framework delayed". InfoWorld.com. Vaadatud 25.01.2021.
7. Stephen Fluin (4. mai 2018). "Version 6 of Angular Now Available". angulario blog. Vaadatud 25.01.2021.
8. Stephen Fluin (oktoober 2018). "Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more". Angular io blog. Vaadatud 25.01.2021.
9. Stephen Fluin (9. veebruar 2019). "A plan for version 8.0 and Ivy". angular io blog. Vaadatud 25.01.2021.
10. Stephen Fluin (6. veebruar 2020). "Version 9 of Angular Now Available — Project Ivy has arrived!". angular io blog. Vaadatud 01.25.2021. {{netiviide}}: kontrolli kuupäeva väärtust: |vaadatud= (juhend)
11. Stephen Fluin (25. juuni 2020). "Version 10 of Angular Now Available". Angular io blog. Vaadatud 25.01.2021.
12. Mark Techson (12. november 2020). "Version 11 of Angular Now Available". Angular io blog. Vaadatud 25.01.2021.
13. "Angular Development" (inglise). Vaadatud 9. aprillil 2024.