Cel mai bun mod de a vedea puterea unei aplicații AngularJS este să vă creați prima aplicație de bază „Hello World” în Angular.JS.
Există multe medii de dezvoltare integrate pe care le puteți utiliza pentru dezvoltarea AngularJS, unele dintre cele populare sunt menționate mai jos. În exemplul nostru, folosim Webstorm ca IDE.
- Webstorm
- Text sublim
- AngularJS Eclipse
- Studio vizual
Bună ziua lume, AngularJS
Exemplul de mai jos arată cel mai simplu mod de a crea prima aplicație „Hello world” în AngularJS.
Guru99 {{message}}
Explicatie cod:
- Cuvântul cheie „ ng-app ” este utilizat pentru a indica faptul că această aplicație ar trebui considerată ca o aplicație js unghiulară. Orice nume poate fi dat acestei aplicații.
- Controlerul este ceea ce este folosit pentru a menține logica de afaceri. În eticheta h1, dorim să accesăm controlerul, care va avea logica pentru a afișa „HelloWorld”, deci putem spune, în această etichetă vrem să accesăm controlerul numit „HelloWorldCtrl”.
- Folosim o variabilă de membru numită „mesaj” care nu este altceva decât un substituent pentru a afișa mesajul „Bună ziua lumii”.
- „Eticheta script” este utilizată pentru a face referire la scriptul angular.js, care are toate funcționalitățile necesare pentru js angular. Fără această referință, dacă încercăm să folosim orice funcție AngularJS, acestea nu vor funcționa.
- „Controler” este locul în care ne creăm logica de afaceri, care este controlerul nostru. Specificul fiecărui cuvânt cheie va fi explicat în capitolele următoare. Ceea ce este important de reținut este că definim o metodă de control numită „HelloWorldCtrl” la care se face referire în Pasul 2.
- Creăm o „funcție” care va fi apelată atunci când codul nostru apelează acest controler. Obiectul $ scope este un obiect special în AngularJS care este un obiect global utilizat în Angular.js. Obiectul $ scope este utilizat pentru a gestiona datele dintre controler și vizualizare.
- Creăm o variabilă membru numită „mesaj”, atribuindu-i valoarea „HelloWorld” și atașând variabila membru obiectului scop.
NOTĂ : Directiva ng-controller este un cuvânt cheie definit în AngularJS (pasul 2) și este utilizat pentru a defini controlere în aplicația dvs. Aici, în aplicația noastră, am folosit cuvântul cheie ng-controller pentru a defini un controller numit „HelloWorldCtrl”. Logica reală pentru controler va fi creată în (pasul 5).
Dacă comanda este executată cu succes, următoarea ieșire va fi afișată când rulați codul în browser.
Ieșire:
Va fi afișat mesajul „Hello World”.
