Aplicația AngularJS Hello World: primul tău exemplu de program
James Hartman
Cel mai bun mod de a vedea puterea unei aplicații AngularJS este să creați primul program 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-ul nostru.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Visual Studio
Bună lume, AngularJS
Exemplul de mai jos arată cel mai simplu mod de a crea prima aplicație „Hello world” în AngularJS.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Explicația codului:
- "ng-app” este folosit 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 tag-ul h1, dorim să accesăm controlerul, care va avea logica să afișeze „HelloWorld”, așa că putem spune, în acest tag dorim să accesăm controlerul numit „HelloWorldCtrl”.
- Folosim o variabilă membru numită „mesaj”, care nu este altceva decât un substituent pentru a afișa mesajul „Hello World”.
- „Eticheta de script” este folosită pentru a face referire la scriptul angular.js care are toate funcționalitățile necesare pentru angular js. Fără această referință, dacă încercăm să folosim orice funcție AngularJS, acestea nu vor funcționa.
- „Controller” este locul în care ne creăm de fapt 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 remarcat, definim o metodă de controler 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 folosit pentru a gestiona datele dintre controlor și vizualizare.
- Creăm o variabilă membru numită „mesaj”, atribuindu-i valoarea „HelloWorld” și atașând variabila membru obiectului scope.
NOTĂ: Directiva ng-controller este un cuvânt cheie definit în AngularJS (pasul #2) și este folosit pentru a defini controlere în aplicația dvs. Aici, în aplicația noastră, am folosit cuvântul cheie ng-controller pentru a defini un controler 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ă atunci când rulați codul în browser.
ieșire:
Va fi afișat mesajul „Hello World”.
