Applicazione AngularJS Hello World: il tuo primo programma di esempio
James Hartmann
Il modo migliore per vedere la potenza di un'applicazione AngularJS è creare la tua prima app "Hello World" del programma di base in Angular.JS.
Esistono molti ambienti di sviluppo integrati che puoi utilizzare per lo sviluppo di AngularJS, alcuni di quelli più popolari sono menzionati di seguito. Nel nostro esempio, stiamo usando Webstorm come il nostro IDE.
- Webstorm
- Sublime Text
- AngularJS Eclipse
- Di Visual Studio
Ciao mondo, AngularJS
L'esempio seguente mostra il modo più semplice per creare la tua prima applicazione "Hello world" in 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>
Spiegazione del codice:
- Il "ng-appLa parola chiave " viene utilizzata per indicare che questa applicazione deve essere considerata come un'applicazione Angular js. A questa applicazione può essere assegnato qualsiasi nome.
- Il controller è ciò che viene utilizzato per mantenere la logica aziendale. Nel tag h1, vogliamo accedere al controller, che avrà la logica per visualizzare "HelloWorld", quindi possiamo dire, in questo tag vogliamo accedere al controller denominato "HelloWorldCtrl".
- Stiamo utilizzando una variabile membro chiamata "messaggio" che non è altro che un segnaposto per visualizzare il messaggio "Hello World".
- Il "tag script" viene utilizzato per fare riferimento allo script angular.js che ha tutte le funzionalità necessarie per angular js. Senza questo riferimento, se proviamo a utilizzare qualche funzione AngularJS, questa non funzionerà.
- Il “controllore” è il luogo in cui creiamo effettivamente la nostra logica aziendale, che è il nostro controllore. Le specifiche di ciascuna parola chiave verranno spiegate nei capitoli successivi. Ciò che è importante notare è che stiamo definendo un metodo controller chiamato "HelloWorldCtrl" a cui si fa riferimento nel passaggio 2.
- Stiamo creando una "funzione" che verrà chiamata quando il nostro codice chiama questo controller. L'oggetto $scope è un oggetto speciale in AngularJS che è un oggetto globale utilizzato in Angular.js. L'oggetto $scope viene utilizzato per gestire i dati tra il controller e la vista.
- Stiamo creando una variabile membro chiamata "messaggio", assegnandole il valore di "HelloWorld" e allegando la variabile membro all'oggetto scope.
NOTA: La direttiva ng-controller è una parola chiave definita in AngularJS (passaggio n. 2) e viene utilizzato per definire i controller nell'applicazione. Qui nella nostra applicazione abbiamo utilizzato la parola chiave ng-controller per definire un controller denominato "HelloWorldCtrl". La logica effettiva per il controller verrà creata nel (passaggio n. 5).
Se il comando viene eseguito correttamente, quando si esegue il codice nel browser verrà visualizzato il seguente output.
Produzione:
Verrà visualizzato il messaggio "Hello World".
