Ovaj priručnik predstavlja seriju članaka fokusiranih na izgradnju efektivne aplikacijske arhitekture u Angularu, temeljeno na iskustvima korištenim u Ekobitu.
U ovom dijelu priručnika za Angular arhitekturu upoznat ćemo se s početnom strukturom Angular aplikacije, zajedno s postupkom izrade i pripreme prvog Angular programa za isporuku.
Kako Angular projekt evolvira, u drugom dijelu priručnika za Angular arhitekturu kreirat ćemo module, dinamički ih učitati, dijeliti njihove podatke i započeti graditi modularnu arhitekturu.
Preduvjeti
Za čitanje ovog članka se pretpostavlja da ste upoznati s osnovama NuGet paketa i paradigme single-page aplikacija (SPA), koja se koristi prilikom izrade web aplikacija na strani klijenta. Pretpostavlja se i da ste upoznati s TypeScript-om i da imate barem neko iskustvo u izradi aplikacija u Angularu.
Početna struktura Angular aplikacije
Kao zadana organizacija projekta (od Angular verzije 2 nadalje), za vas se kreira mapa srcnakon što izvršite sljedeću naredbu putem Angular CLI-a:
ng new <project-name>
‘Angular application’ means that the Angular can be launched directly on a browser by using webpack-live-server (by default, running on http://localhost:4200):
ng serve
Lako je raditi s Angular framework-om korištenjem razvojnog okružja Visual Studio Code jer je to najpopularniji IDE za web razvoj te stoga sadrži mnoštvo korisnih alata za pisanje kôda, uklanjanje pogrešaka i kontrolu source code-a.
Evo popisa najvažnijih datoteka u korijenskoj mapi, kreiranog od strane Angular CLI-a:
– package.json –sadrži sve pakete potrebne za razvoj i produkciju
– tsconfig.json – sadrži konfiguraciju prevođenja (transpilinga) TypeScript-a
– tslint.json –sadrži sva pravila za statičku analizu TypeScript kôda (tzv. linting)
– angular.json – sadrži opcije za izgradnju i konfiguriranje Angular projekata
Sve ostalo nalazi se u srcmapi, uključujući sljedeće:
– index.html – datoteka koja je ulazna točka za posluživanje Angular aplikacije
– main.ts –predstavlja glavnu TypeScript datoteku za pokretanje aplikacije
– styles.scss – globalno definirana datoteka SCSS kaskadnih tablica stilova (CSS) (ili bilo koja druga vrsta CSS datoteke podržana konfiguracijom)
– mapa app– koja sadrži sav Angular kod
– mapa assets– koja sadrži statičke datoteke (npr. slike, fontove, JSON datoteke)
– mapa environments– koja sadrži različita okruženja koja se koriste prilikom razvoja ili testiranja aplikacije
Evo kako izgleda ova zadana Angular struktura aplikacije u Visual Studio Code-u:
Postupak izrade Angular aplikacije
Važno je napomenuti kako je Angular aplikacija izrađena, kao i kako se izvodi njezin životni ciklus. Prilikom pripreme aplikacije za pokretanje (tj. postupak ‘bildanja’), Angular CLI koristi alat WebPack koji služi za sastavljanje paketa od elemenata koji će se poslužiti na host-u. Ti elementi uključuju:
– prevođenje TypeScript kôda u običan JavaScript kôd (jer je JavaScript jedini jezik koji web preglednik može razumjeti)
– paketiranje asset-a u jednu datoteku radi optimizacije performansi
– paketiranje stilova u jednu datoteku (također radi optimizacije učitavanja)
Angular CLI koristi output hashing za generiranje jedinstvenih naziva rezultirajućih datoteka kako bi ih osvježio pri svakom sastavljanju. To se može promijeniti u konfiguracijskoj datoteci angular.json. (Na ovo ćemo doći kasnije u ovoj seriji.)
Dobiveni JavaScript kôd dalje je odvojen namjenom i podrijetlom, sadržavajući:
– main.js – koji sadrži prevedeni kôd iz aplikacijskog kôda (kojeg smo napravili sami)
– polyfills.js – koji sadrže dodatnu logiku kôda za podržavanje starijih preglednika
– runtime.js – koji sadrži potrebni sistemski kôd za pokretanje Angular aplikacije
-scripts. js – sa svim skriptama potrebnih za stilove i prilagođene JavaScript biblioteke
– styles.js – koji sadrže stilove definirane aplikacijom te vanjskim bibliotekama (kao što je Bootstrap)
– vendor.ts – koji sadrži kôd koji dolazi iz mape node_modules (tj. vanjskih biblioteka, uključujući i samog Angular sustava).
Možete pitati zašto je potrebno takvo razdvajanje u postupku izrade. Angular CLI gradi te datoteke na takav način da bi se dobilo što brže početno učitavanje aplikacije. Također radi na ovaj način, tako da može učitati neke datoteke tek onda kada su mu potrebne (tj. učitavanje na zahtjev).
Izrada za produkciju
Iz gornje snimke zaslona vidi se kako se te datoteke nazivaju i koliko su velike. Možete zamisliti važnost odvajanja kôda na manje dijelove ako prelaze nekoliko megabajta. Da biste testirali i pripremili rezultirajući kôd za produkciju, na terminalu trebate pokrenuti sljedeću naredbu:
ng build --prod
Ovo su datoteke kao rezultat izgradnje s uključenom opcijom output hashing, koje se nalazi u mapi dist:
Da biste dodatno optimizirali veličinu paketa, od verzije 8, Angular CLI producira dvije vrste datoteka: jednu za podržavanje ES5(za starije preglednike) i jednu za podršku ES2015standarda (za moderne verzije preglednika) – kao što je gore prikazano. To znači da, ako ste sigurni da najnoviji EcmaScript standard podržavaju ciljani preglednici, možete uštedjeti nekoliko kilobajta – čak i MB-a – i učitati aplikaciju brže.
Za detaljnije informacije o veličini vaše aplikacije, pogledajte Webpack Bundle Analyzer Tool, koji daje grafički pregled zauzimanja memorije različitih datoteka u paketu.
____________________________________________________________
Napomena: Sav izvorni kôd koji se koristi u ovim člancima je dostupan ovdje.
