AngularJS Hello World: il tuo primo programma di esempio

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

I programmi "Hello World" in AngularJS necessitano solo di un singolo file HTML, un riferimento a uno script e due direttive, ng-app e ng-controller, per collegare una variabile di ambito del controller alla pagina tramite un'espressione tra doppie parentesi graffe.

  • 🔘 ng-app: L'attributo ng-app contrassegna l'elemento radice e avvia automaticamente il modulo AngularJS specificato.
  • ☑️ ng-controller: ng-controller collega HelloWorldCtrl all'elemento h1, rendendo così disponibile lo scope del controller a tale elemento.
  • ✅ Rilegatura dell'ambito: L'assegnazione di $scope.message all'interno del controller alimenta l'espressione {{message}} visualizzata nella vista.
  • 🧪 File singolo: Un singolo file HTML e un riferimento a uno script eseguono l'esempio, senza bisogno di alcuna fase di compilazione.
  • ️ Risoluzione dei problemi: La presenza di parentesi graffe sullo schermo indica quasi sempre che la libreria non è stata caricata o che manca il componente ng-app.
  • 📊 Nota sulla versione: Il supporto per AngularJS è terminato a gennaio 2022, con la versione 1.8.3 come rilascio finale; i nuovi progetti devono essere sviluppati in Angular.
Scopri di più

Primo programma di esempio di AngularJS Hello World che utilizza ng-app e ng-controller

Il modo migliore per rendersi conto della potenza di un'applicazione AngularJS è creare il primo semplice programma "Hello World" in AngularJS.

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

  1. Webstorm
  2. Sublime Text
  3. AngularJS Eclipse
  4. Di Visual Studio

Ciao mondo, AngularJS

Nota sulla versione: AngularJS 1.x ha lasciato il supporto a lungo termine il 31 dicembre 2021 e il team del framework conferma che Il supporto per AngularJS è ufficialmente terminato. nel gennaio 2022, con la versione 1.8.3 come rilascio finale e senza patch di sicurezza successive. Ogni passaggio e blocco di codice riportato di seguito è conservato esattamente come scritto. I nuovi progetti appartengono al moderno Angular, dove lo stesso esercizio inizia con ng serve e un componente autonomo e usa ancora lo stesso {{ }} Sintassi di interpolazione.

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

Lo screenshot annotato qui sotto etichetta ogni parte di quel file e i suoi sette numeri corrispondono a Code Di seguito la spiegazione. È stato acquisito con una build precedente, la 1.4.0, quindi la riga dello script differisce dalla versione indicata nel codice.

File HTML annotato "Hello World" di AngularJS con sette didascalie numerate per ng-app, ng-controller, il riferimento allo script e la variabile scope.

<!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>

Code Spiegazione:

  1. Il "ng-appLa parola chiave " viene utilizzata per indicare che questa applicazione deve essere considerata come un'applicazione AngularJS. A questa applicazione può essere assegnato un nome qualsiasi.
  2. Il controller è ciò che viene utilizzato per contenere la logica di business. Nel tag h1, vogliamo accedere al controllore, che conterrà la logica per visualizzare "Hello World", quindi possiamo dire che in questo tag vogliamo accedere al controller denominato "HelloWorldCtrl".
  3. Stiamo utilizzando una variabile membro chiamata "messaggio" che non è altro che un segnaposto per visualizzare il messaggio "Hello World".
  4. Il tag "script" viene utilizzato per fare riferimento allo script angular.js che contiene tutte le funzionalità necessarie per AngularJS. Senza questo riferimento, se provassimo a utilizzare qualsiasi funzione di AngularJS, questa non funzionerebbe.
  5. "Controller" è il punto in cui creiamo effettivamente la nostra logica di business, ovvero il nostro controller. I dettagli di ciascuna parola chiave saranno spiegati nei capitoli successivi. È importante notare che stiamo definendo un metodo del controller chiamato 'HelloWorldCtrl', a cui si fa riferimento nel passaggio 2.
  6. Stiamo creando una "funzione" che verrà chiamata quando il nostro codice richiamerà questo controller. L'oggetto $scope è un oggetto speciale in AngularJS, ovvero un oggetto globale utilizzato all'interno di AngularJS. 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 "Hello World" e collegando la variabile membro all'oggetto scope.

NOTA: La direttiva ng-controller è una parola chiave definita in AngularJS (Passaggio 2) e viene utilizzato per definire i controller nella tua applicazione. Qui nella nostra applicazione, abbiamo utilizzato la parola chiave ng-controller per definire un controller chiamato 'HelloWorldCtrl'. La logica effettiva per il controller verrà creata nel (Passaggio 5).

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

Produzione:

Verrà visualizzato il messaggio "Hello World".

Finestra del browser intitolata Guru99 rendering dell'intestazione Hello World dalla variabile scope di AngularJS

Come caricare AngularJS: tramite CDN o file locale

L'esempio sopra funziona perché una riga trascina il framework nella pagina prima che il browser raggiunga la fine del corpo. AngularJS viene distribuito come un singolo JavaSi tratta di un file script, quindi il primo programma non necessita di una fase di compilazione né di un gestore di pacchetti. È sufficiente un semplice file HTML aperto in un browser.

Esistono due modi per importare quel file.

  1. Fare riferimento a una copia CDN. L'esempio indica code.angularjs.org e pin versione 1.6.9. Quel server serve ancora build 1.x, la più alta delle quali è la 1.8.2, mentre Google AngularJS non è più presente nell'elenco delle librerie ospitate.
  2. Scarica una copia locale. Salva il file accanto alla pagina HTML e fai in modo che il tag script punti ad esso. Una copia locale permette all'esempio di funzionare anche offline, il che è importante quando un proxy blocca la CDN.
<!-- Option 1: reference a CDN copy -->
<script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

<!-- Option 2: reference a downloaded copy in the same folder -->
<script src="angular.min.js"></script>

Usa il angular.js mentre si impara e angular.min.js in produzione: la build non minimizzata stampa uno stack leggibile tracsì, mentre la build minimizzata riporta variabili rinominate.

Una volta caricato il file, ng-app avvia il framework. AngularJS cerca quell'attributo al termine del caricamento del documento, considera l'elemento che lo contiene come radice di compilazione e avvia il modulo specificato nel suo valore. Ne conseguono tre conseguenze:

  • Solo il primo ng-app su una pagina viene avviato automaticamente. Un secondo viene ignorato a meno che angular.bootstrap viene chiamata manualmente.
  • Il valore deve indicare un modulo registrato con angular.module, altrimenti la console segnala [$injector:modulerr].
  • Dove Posizionare ng-app sul canale html L'elemento, come nell'esempio, racchiude l'intero documento in AngularJS; anche un contenitore più ristretto funziona.

ARTICOLI CORRELATI

Come funzionano le espressioni {{ }} e il binding ng-model

Le doppie staffe intorno message nel tag h1 non è un segnaposto riempito una volta al momento del caricamento. AngularJS compila quel nodo di testo in un watcher sull'ambiente circostante portata, quindi l'output renderizzato tracks $scope.message per tutto il tempo in cui la pagina esiste.

Il ciclo si articola in tre fasi.

  1. Il controller scrive un valore su $scope.
  2. Una fase di digest confronta ogni espressione osservata con il suo risultato precedente.
  3. Ogni espressione il cui valore è cambiato viene renderizzata nuovamente sul posto.

Un'espressione interpolata è quindi unidirezionale, dall'ambito alla vista. Il binding bidirezionale richiede modello ng, il Direttive progettato per i controlli dei moduli. Aggiungi <input ng-model="message"> Accanto all'intestazione, digita nella casella e l'intestazione cambierà a ogni tasto premuto, perché ng-model riscrive il valore del campo nella stessa proprietà di ambito monitorata dall'espressione.

Le espressioni sono volutamente limitate. Leggono le proprietà di ambito, chiamano i metodi di ambito e tollerano silenziosamente i valori non definiti, tuttavia non possono dichiarare variabili, utilizzare istruzioni di controllo del flusso o raggiungere oggetti globali come window.

Come risolvere una pagina vuota o non renderizzata {{ }}

Un primo programma AngularJS fallisce in uno dei due modi visibili: la pagina rimane vuota oppure il testo letterale {{message}} appare dove dovrebbe esserci "Hello World". Entrambi i casi indicano che il framework non ha mai preso il controllo del markup. Esegui i controlli seguenti in ordine, con la console del browser aperta.

  1. Conferma il caricamento della libreria. Apri il pannello Rete e cerca angular.js richiesta. Un errore 404 o una CDN irraggiungibile lascia le parentesi sullo schermo invariate.
  2. Verifica il percorso dello script. Un percorso relativo si risolve rispetto alla cartella che contiene il file HTML, quindi una copia in un js necessità della sottocartella js/angular.min.js.
  3. Verifica ng-app. Un attributo mancante o scritto male non significa nulla bootstraps. L'attributo è con il trattino come ng-app nel markup, anche se la direttiva è in formato camel case JavaScript.
  4. Leggi l'errore nella console. [$injector:modulerr] significa che il modulo denominato da ng-app non è mai stato registrato. [ng:areq] di solito significa che il nome del controller nel markup non corrisponde al nome passato a .controller().
  5. Cerca una seconda ng-app. Solo il primo elemento viene avviato automaticamente, quindi una copia residua lasciata su un elemento interno disabilita silenziosamente quella parte della pagina.

Altre due cause spiegano la maggior parte delle restanti segnalazioni.

  • Il protocollo file. Questo esempio a file singolo funziona correttamente se aperto direttamente dal disco, ma qualsiasi template scaricato tramite XHR viene bloccato dalle regole di origine del browser. Una volta che i template sono disponibili, la cartella deve essere servita tramite HTTP.
  • Un breve lampo di apparecchio ortodontico. Quando il markup viene renderizzato prima che il framework lo compili, l'espressione grezza è visibile per un momento. Aggiungi ng-cloak all'elemento, oppure scambiare l'espressione con ng-bind="message", che non mostra mai il proprio markup.

Se nessuna di queste opzioni è applicabile, riducete la pagina all'esempio sopra riportato e aggiungete il vostro codice una riga alla volta.

DOMANDE FREQUENTI

Ognuna delle quattro elencate sopra funziona, e questo esempio utilizza WebstormPoiché il programma è un singolo file HTML statico, è sufficiente un semplice editor di testo. Un IDE aggiunge solo il completamento automatico delle direttive, il ricaricamento automatico e il debug integrato.

$scope è l'oggetto di binding condiviso tra un controllore e la sua visualizzazione. Scrivendo $scope.message all'interno di HelloWorldCtrl, tale proprietà diventa visibile all'espressione posizionata sull'elemento h1.

Entrambi i file contengono lo stesso framework. angular.js non è minimizzato, quindi gli errori puntano al codice sorgente leggibile. angular.min.js è compresso per la produzione e necessita di annotazioni esplicite delle dipendenze, perché la minimizzazione rinomina i nomi dei parametri che AngularJS altrimenti ispeziona.

AngularJS è il framework 1.x mostrato qui, guidato da direttive, $scope e semplice JavaScript. Angular, ovvero la versione 2 e successive, è uno script separato. TypeScript Framework costruito su componenti e linea attivamente mantenuta.

Principalmente per la manutenzione delle applicazioni 1.x esistenti, che rimangono diffuse. Il vocabolario di binding, direttive e iniezione di dipendenza trasferimenti, tuttavia il supporto è terminato a gennaio 2022, quindi i nuovi progetti devono utilizzare la versione moderna di Angular.

Sì. Registra ciascuno con .controller() nello stesso modulo e collegali a elementi diversi usando ng-controller. Ognuno riceve il proprio ambito figlio, quindi le proprietà con lo stesso nome rimangono indipendenti.

Gli assistenti moderni leggono un codebase 1.x e producono un inventario di direttive, filtri e servizi con equivalenti di componenti e servizi suggeriti. Tale inventario è utile per scoping il lavoro, anche se ogni mappaping Necessita ancora di verifica manuale.

Copilota GitHub completa il boilerplate del controller, le assegnazioni di $scope e ng-invia gestori da un breve commento, ma la sua formazione tende verso l'Angular moderno, quindi verifica che i suggerimenti utilizzino effettivamente la sintassi 1.x.

Riassumi questo post con: