Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:04 [2024/10/06 22:01] alexandru.predescu |
isi:laboratoare:04 [2025/10/27 19:15] (current) sorin.ciolofan [Task] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 04. Dezvoltarea unei aplicații cu Angular framework ===== | + | ===== Laboratorul 04. Dezvoltarea unei aplicații web cu Angular framework ===== |
| ==== Obiective laborator ==== | ==== Obiective laborator ==== | ||
| Line 26: | Line 26: | ||
| <note>Descărcați proiectul de pe GitHub: [[https://github.com/alexp25/AngularDemoArcGIS|AngularDemoArcGIS]]</note> | <note>Descărcați proiectul de pe GitHub: [[https://github.com/alexp25/AngularDemoArcGIS|AngularDemoArcGIS]]</note> | ||
| + | |||
| + | <note tip> | ||
| + | [[https://material.angular.io/components/categories|Angular Material]] este o colecție de componente de UI standardizate care se pot integra ușor într-o aplicație Angular. Acestea presupun niste elemente HTML cu funcționalitate integrată. | ||
| + | </note> | ||
| ==== Setup și instalare proiect minimal cu Angular ==== | ==== Setup și instalare proiect minimal cu Angular ==== | ||
| + | |||
| + | <note warning>Skip dacă ați finalizat setup-ul în laboratorul trecut</note> | ||
| Î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. | Î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. | ||
| Line 78: | Line 84: | ||
| === Task 1 === | === Task 1 === | ||
| - | Realizați o aplicație web cu Angular și JavaScript API pe baza template-ului din laborator și adăugați cel puțin 3 funcționalități din laboratorul anterior. | + | |
| + | 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 negre, capete de traseu (trailheads) pe hartă. | ||
| <note important>Adăugați API key-ul din contul ArcGIS Developer: ''esriConfig.apiKey = "MY_API_KEY";''</note> | <note important>Adăugați API key-ul din contul ArcGIS Developer: ''esriConfig.apiKey = "MY_API_KEY";''</note> | ||
| === Task 2 === | === Task 2 === | ||
| - | Adăugați serviciul de rutare (decomentați linia ''this.addRouter();'') și verificați funcționarea acestuia. | + | Adăugați elementele grafice din [[isi:laboratoare:02|Laboratorul 02]]: poligon, punct si polilinie (ex. GraphicsLayer). |
| + | Indicatie: folositi metoda de instanţiere cu new Polyline(...), new Point(...), etc. Exemplu: | ||
| + | <code> | ||
| + | const polygon = new Polygon({ | ||
| + | rings: [ | ||
| + | [ | ||
| + | [-118.818984489994, 34.0137559967283], | ||
| + | [-118.806796597377, 34.0215816298725], | ||
| + | [-118.791432890735, 34.0163883241613], | ||
| + | [-118.79596686535, 34.008564864635], | ||
| + | [-118.808558110679, 34.0035027131376] | ||
| + | ] | ||
| + | ] | ||
| + | }); | ||
| + | </code> | ||
| === Task 3 === | === Task 3 === | ||
| - | Urmăriți modul de integrare a serviciului de rutare. În mod similar, adăugați serviciul de căutare a locațiilor ([[https://developers.arcgis.com/documentation/mapping-apis-and-services/search/place-search/|Place search]]) pe baza unei categorii predefinite - Local search (by category). | + | 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 ([[https://developers.arcgis.com/javascript/latest/tutorials/find-places/|Place search]]) pe baza unei categorii predefinite. |
| + | |||
| + | {{:isi:laboratoare:lab4:l4_1.png?800|}} | ||
| ==== Resurse ==== | ==== Resurse ==== | ||
