Laboratorul 04. Dezvoltarea unei aplicații web cu Angular framework
Obiective laborator
- Înțelegerea modului de integrare a API-ului ArcGIS într-un framework de JavaScript
- Înțelegerea modului de integrare a funcționalităților ArcGIS în Angular
- Structură modulară a codului
- Integrarea modulelor ArcGIS prin intermediul
esriLoader
- Exersarea modului de lucru cu elemente grafice pe hartă
Introducere in Angular
Pentru a realiza proiecte mai complexe (majoritatea aplicațiilor web moderne), se folosesc în general framework-uri de JavaScript, precum Angular, React sau Vue. What is Angular?
Acestea permit realizarea aplicațiilor de tip SPA (Single Page Application) având o structură modulară (model MVC sau MVVM) și un set de facilități standard precum rutare, interacțiune cu DOM-ul (Document Object Model), layout flexibil, componente vizuale reutilizabile (ex. Angular Material), optimizare build. Principalul avantaj este că oferă o structură standard ce permite extensibilitatea codului (în comparație cu vanilla JS, unde putem ajunge foarte ușor la un spaghetti code).
Angular prezintă un avantaj major față de celelalte framework-uri: folosește TypeScript, o extensie a JavaScript-ului care combină avantajele unui limbaj puternic tipizat (strongly typed) cu flexibilitatea limbajului JavaScript (în esență weakly typed), și permite folosirea conceptelor OOP într-o arhitectură de tip MVVM (Model-View-ViewModel).
Tutorial practic introductiv: Angular - Tour of Heroes application and tutorial
Atunci când lucrăm cu un framework, este recomandat să pornim de la un template care conține scheletul aplicației și configurările de bază. Angular CLI pune la dispoziție un set de comenzi pentru inițializarea unui proiect pe baza unor template-uri standard, dar noi vom folosi un template de pe GitHub, preconfigurat pentru integrarea bibliotecii ArcGIS.
Setup și instalare proiect minimal cu Angular
În laboratorul anterior am lucrat în CodePen. Acum, proiectul este mai complex și vom lucra pe mașina locală. Avem nevoie de câteva tool-uri înainte de a începe.
Instalare Node.js și NPM
Instalați versiunea LTS de aici, dacă nu aveți deja instalat Node.js: https://nodejs.org/en/
Instalare dependențe globale
Instalare dependențe locale
În folder-ul dezarhivat pe care l-ați descărcat anterior, deschideți un terminal (e.g. PowerShell, shift+click dreapta / Open PowerShell window here) și rulați comanda:
npm install
Compilare și rulare proiect
Pentru a împacheta proiectul și a deschide un server local, ne folosim de toolkit-ul Angular (ng serve). Putem folosi următoarea comandă definită în configurarea proiectului (package.json)
npm run start
Dacă totul este ok (nu sunt erori în cod și toate dependențele au fost instalate corect), se va deschide un server pe portul 4200.
Deschideți browser-ul la adresa: http://localhost:4200/
Task
Task 1
Rulați aplicația web realizată cu Angular și JavaScript API pe baza template-ului din laborator. Verificați funcția de rutare între două puncte (capete de traseu / trailheads) pe hartă.
esriConfig.apiKey = “MY_API_KEY”;
Task 2
Adăugați elementele grafice din laboratorul anterior: poligon, punct si polilinie (ex. GraphicsLayer).
Task 3
Urmăriți modul de integrare a serviciului de rutare în componenta Angular. În mod similar, adăugați serviciul de căutare a locațiilor (Place search) pe baza unei categorii predefinite - Local search (by category).
Resurse
