Applicazione Hello World di AngularJS: il tuo primo programma di esempio

Sommario:

Anonim

Il modo migliore per vedere la potenza di un'applicazione AngularJS è creare il tuo primo programma di base "Hello World" in Angular.JS.

Esistono molti ambienti di sviluppo integrati che puoi utilizzare per lo sviluppo di AngularJS, alcuni dei più popolari sono menzionati di seguito. Nel nostro esempio, utilizziamo Webstorm come IDE.

  1. Webstorm
  2. Testo sublime
  3. AngularJS Eclipse
  4. Visual Studio

Ciao mondo, AngularJS

L'esempio seguente mostra il modo più semplice per creare la tua prima applicazione "Hello world" in AngularJS.

Guru99

{{message}}

Spiegazione del codice:

  1. La parola chiave " ng-app " viene utilizzata per indicare che questa applicazione deve essere considerata un'applicazione js angolare. Qualsiasi nome può essere dato a questa applicazione.
  2. Il controller è ciò che viene utilizzato per contenere la logica aziendale. Nel tag h1, vogliamo accedere al controllore, che avrà la logica per visualizzare "HelloWorld", quindi possiamo dire, in questo tag vogliamo accedere al controllore chiamato "HelloWorldCtrl".
  3. Stiamo usando una variabile membro chiamata "message" che non è altro che un segnaposto per visualizzare il messaggio "Hello World".
  4. Lo "script tag" 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 qualsiasi funzione AngularJS, non funzionerà.
  5. "Controller" è il luogo in cui stiamo effettivamente creando la nostra logica di business, che è il nostro controller. Le specifiche di ciascuna parola chiave verranno spiegate nei capitoli successivi. Ciò che è importante notare che stiamo definendo un metodo di controller chiamato "HelloWorldCtrl" a cui si fa riferimento nel passaggio 2.
  6. Stiamo creando una "funzione" che verrà chiamata quando il nostro codice chiamerà questo controller. L'oggetto $ scope è un oggetto speciale in AngularJS che è un oggetto globale utilizzato all'interno di Angular.js. L'oggetto $ scope viene utilizzato per gestire i dati tra il controller e la vista.
  7. Stiamo creando una variabile membro chiamata "message", 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 2) e viene utilizzata per definire i controller nell'applicazione. Qui nella nostra applicazione, abbiamo usato la parola chiave ng-controller per definire un controller chiamato "HelloWorldCtrl". La logica effettiva per il controller verrà creata nel (passaggio 5).

Se il comando viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

Produzione:

Verrà visualizzato il messaggio "Hello World".