AngularJS - Hello World

Ciao mondo classico

Generalmente quando stiamo imparando ad usare un nuovo linguaggio, la prima cosa che facciamo è creare un programmino che stampi per noi quello classico. "Ciao mondo"Sebbene ciò possa non essere di reale utilità in un'applicazione, ha diverse implicazioni. Ci insegna ad avviare la lingua e ci dà modo di verificare che tutto funzioni correttamente.
In questa sezione vedremo come eseguire un Ciao mondo, inoltre visualizzando e rivedendo i concetti associati che ci consentono di creare applicazioni in AngularJS.
Nel AngularJS Il template è lato client, quindi i dati pervengono alla nostra applicazione ed è proprio in quest'area che viene organizzata e predisposta per il suo consumo da parte dell'utente; quando si applica questo concetto a un'applicazione a pagina singola e si utilizza AJAX saremo in grado di raggiungere il dinamismo senza la necessità per l'utente di ricaricare il web dove naviga.
Per eseguire un semplice Ciao mondo E sapendo quanto sopra, vediamo di cosa abbiamo bisogno per raggiungere il nostro obiettivo:

• Abbiamo bisogno di HTML base dove includiamo due file. Il primo sarà il AngularJS e il secondo è uno script personalizzato dove andrà la nostra logica di elaborazione.
• All'interno del HTML devi definire il blocco dove AngularJS avrà influenza, cioè dove collocheremo l'etichetta ng-app.
• Nel nostro script personalizzato dobbiamo creare un controller AngularJS per passare il testo alla nostra applicazione.

Una volta che sappiamo di cosa abbiamo bisogno, dobbiamo costruire il codice corrispondente, vediamo nell'immagine seguente come l'abbiamo fatto:

INGRANDIRE

Vediamo che abbiamo incluso AngularJS dal CDN di Google in questo modo non dobbiamo scaricare i file sul nostro progetto al momento, quindi invece di inserire uno script personalizzato quello che abbiamo fatto è scrivere le istruzioni che ci servono, lo facciamo a titolo dimostrativo, è sempre bene separare i codice in modo che sia più facile da gestire.
Già l'etichetta HTML ha la proprietà ng-app che significa che AngularJS ha l'intero documento come scopo e creiamo un div dove poniamo a ng-controller che è un controller AngularJS.
ImportanteTutto ciò che il nostro controller farà è stampare la parola Ciao accanto alla parola Mondo che abbiamo già scritto in precedenza, evidenziamo come AngularJS non ha bisogno di nient'altro che è che definiamo il variabile di contesto e crea automaticamente i collegamenti corrispondenti a noi.
Ora vediamo come appare tutto questo nel browser, abbiamo aperto il console firebug per mostrare cosa è successo quando abbiamo avviato la nostra applicazione:

INGRANDIRE

Possiamo quindi notare come AngularJS al momento del caricamento del documento hai inserito la parola Ciao nel nostro div e in questo modo l'applicazione funzionerebbe.
Come vediamo abbiamo creato il nostro Ciao mondo e abbiamo capito un po' di più come funziona AngularJS E cosa intendiamo quando parliamo del template che è nel client, immaginiamo che la parola sia dati che provengono da un servizio web, qui vediamo come assume una nuova dimensione poiché potremmo generare più dinamismo nelle nostre applicazioni.
Precedentepagina 1 di 2ProssimoTi è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo