Direttive AngularJS: ng-init, ng-app, ng-model e ng-repeat

By: James Hartmann James Hartmann
Hours aggiornato

⚡ Riepilogo intelligente

Le direttive AngularJS estendono il semplice HTML con nuove funzionalità. I ​​marcatori ng-app, ng-init, ng-model e ng-repeat avviano un'applicazione, popolano i dati locali, collegano i controlli del modulo al modello e clonano gli elementi una volta per ogni elemento della collezione.

  • 🧩 Idea centrale: Una direttiva è un marcatore su un elemento HTML che indica al compilatore AngularJS di associarvi un comportamento.
  • 🚀 Bootstrap Point: ng-app dichiara l'elemento radice e avvia automaticamente AngularJS non appena la pagina viene caricata.
  • 🧮 Dati locali: ng-init assegna valori iniziali alle variabili di ambito all'interno del markup, senza necessità di un controller.
  • 🔄 Rilegatura a due vie: ng-model collega un input, un select o una textarea a una proprietà scope, in modo che le modifiche aggiornino il modello istantaneamente.
  • 📋 Markup ripetuto: ng-repeat clona il suo elemento host una volta per ogni elemento in un array o oggetto.
  • ️ Quattro forme di invocazione: La proprietà restrict accetta E, A, C e M per la sintassi di elementi, attributi, classi e commenti.
  • 📚 Biblioteca più ampia: AngularJS fornisce dozzine di direttive integrate, tra cui ng-bind, ng-if, ng-show, ng-class e ng-click.
Scopri di più

Direttive AngularJS

Cos'è la direttiva in AngularJS?

A Direttiva In AngularJS, `ng-model` è un comando che aggiunge nuove funzionalità all'HTML. Quando AngularJS analizza il codice HTML, individua innanzitutto le direttive presenti nella pagina e poi la interpreta di conseguenza. Un semplice esempio di direttiva AngularJS, che abbiamo già visto nei capitoli precedenti, è la direttiva `ng-model`. Questa direttiva viene utilizzata per collegare il modello dati alla vista.

Nota: È possibile avere codice AngularJS di base in una pagina HTML con le direttive ng-init, ng-repeat e ng-model senza la necessità di avere Controller. La logica per queste direttive si trova nel file AngularJS fornito da GoogleI controller sono costrutti di programmazione AngularJS di livello superiore che consentono di implementare la logica di business, ma, come già accennato, per essere considerata un'applicazione AngularJS non è obbligatorio avere un controller.

Ma come fa un browser a finire per eseguirne uno?

Come funzionano le direttive AngularJS in HTML

Come abbiamo definito nell'introduzione, una direttiva AngularJS è un modo per estendere la funzionalità di HTMLQuando la pagina viene caricata, il compilatore AngularJS analizza il DOM, confronta ogni elemento con le direttive registrate e applica il comportamento che trova.

AngularJS Include decine di direttive predefinite, oltre a quelle che puoi registrare tu stesso. Le quattro direttive spiegate di seguito con esempi pratici, ng-app, ng-init, ng-model e ng-repeat, sono quelle che i principianti incontrano per prime. Prima di questi esempi, osserva i quattro modi in cui una direttiva può essere scritta.

Quali sono i quattro tipi di direttive AngularJS?

Una direttiva non è sempre un attributo. Il compilatore AngularJS può trovarne una in base al nome dell'elemento, all'attributo, al nome della classe o al commento, e ogni direttiva dichiara quali forme accetta tramite il suo restrict proprietà. Il valore predefinito è EAPertanto, sia la sintassi degli elementi che quella degli attributi funzionano a meno che non si specifichi diversamente. Il valore è più importante quando si scrive una direttiva personalizzata, perché il compilatore ignora qualsiasi forma esclusa dal valore di restrizione.

limitare il valore Corrispondenza con Esempio di markup Utilizzo tipico
E Nome dell'elemento blocchi autonomi che possiedono un modello
A Attributo Aggiungere un comportamento a un elemento esistente
C Nome della classe Markup obsoleto che non può accettare nuovi attributi
M Commento Raro, mantenuto per la compatibilità con le versioni precedenti.

💡 Suggerimento: Preferire la sintassi degli elementi e degli attributi. Riferimento ufficiale alla direttiva AngularJS Tratta i moduli di classe e di commento come opzioni obsolete. Gli esempi seguenti utilizzano tutti la sintassi degli attributi.

ARTICOLI CORRELATI

ng-app in AngularJS

Questa direttiva viene utilizzata per inizializzare un'applicazione AngularJS. Quando questa direttiva è presente in una pagina HTML, indica ad AngularJS che tale pagina HTML è un'applicazione AngularJS.

Esempio di ng-app

L'esempio seguente mostra come trasformare una normale applicazione HTML in un'applicazione AngularJS.

ng-app in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ Attenzione: L'inserzione mantiene l'originale chrset="UTF 8", esattamente come pubblicato. L'attributo corretto è charset="UTF-8".

Code Spiegazione:

  1. La direttiva "ng-app" viene aggiunta al nostro tag div per indicare che questa applicazione è un'applicazione AngularJS. Si noti che la direttiva ng-app può essere applicata a qualsiasi tag, quindi può essere inserita anche nel tag body.
  2. Poiché abbiamo definito questa applicazione come un'applicazione AngularJS, ora possiamo utilizzare le funzionalità di AngularJS. Nel nostro caso, utilizziamo le espressioni per concatenare semplicemente due stringhe.

Se il codice viene eseguito correttamente, verrà visualizzato l'output seguente.

Produzione:

ng-app in AngularJS

L'output mostra chiaramente il risultato dell'espressione, cosa resa possibile solo perché abbiamo definito l'applicazione come un'applicazione AngularJS. La direttiva successiva fornisce i relativi dati.

ng-init in AngularJS

Questo viene utilizzato per inizializzare i dati dell'applicazione. A volte potrebbe essere necessario disporre di dati locali per l'applicazione, e ciò può essere fatto tramite la direttiva ng-init.

Esempio di ng-init

In questo esempio, creeremo una variabile chiamata "TutorialName" utilizzando la direttiva ng-init e visualizzeremo il valore di quella variabile sulla pagina.

ng-init in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Spiegazione:

  1. La direttiva ng-init viene aggiunta al nostro tag div per definire una variabile locale chiamata "TutorialName" e il valore assegnato a questa è "AngularJS".
  2. In AngularJS utilizziamo delle espressioni per visualizzare l'output della variabile "TutorialName", definita nella nostra direttiva ng-init.

Se il codice viene eseguito correttamente, verrà visualizzato l'output seguente.

Produzione:

ng-init in AngularJS

Nell'output,

  • Il risultato mostra chiaramente l'output dell'espressione che contiene la stringa “AngularJS”. Ciò è dovuto al fatto che la stringa "AngularJS" è stata assegnata alla variabile "TutorialName" nella sezione ng-init.

La direttiva successiva invia i dati dallo schermo al modello.

modello ng in AngularJS

Infine, abbiamo la direttiva ng-model, utilizzata per associare il valore di un controllo HTML ai dati dell'applicazione.

Esempio di modello ng

In questo esempio,

  • Creeremo 2 variabili chiamate “quantità” e “prezzo”. Queste variabili saranno associate a 2 controlli di input di testo.
  • Visualizzeremo quindi l'importo totale in base alla moltiplicazione dei valori del prezzo e della quantità.

modello ng in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Spiegazione:

  1. La direttiva ng-init viene aggiunta al nostro tag div per definire 2 variabili locali; uno si chiama “quantità” e l’altro è “prezzo”.
  2. Ora stiamo utilizzando la direttiva ng-model per associare le caselle di testo "Persone" e "Prezzo di registrazione" rispettivamente alle nostre variabili locali "quantità" e "prezzo".
  3. Infine, mostriamo il Totale tramite un'espressione, che è la moltiplicazione delle variabili quantità e prezzo.

Se il codice viene eseguito correttamente, verrà visualizzato l'output seguente.

Produzione:

modello ng in AngularJS

  • L'output mostra chiaramente la moltiplicazione dei valori per Persone e Prezzo di registrazione.

Ora, se modifichi i valori di Persone e Prezzo di iscrizione nelle caselle di testo, il Totale si aggiorna automaticamente.

modello ng in AngularJS

  • L'output sopra riportato mostra semplicemente la potenza del data binding in AngularJS, che viene ottenuta con l'uso del direttiva sul modello ng.

L'ultimo dei quattro gestisce molti valori contemporaneamente.

ng-ripetizione in AngularJS

Viene utilizzato per ripetere un elemento HTML. L'esempio seguente mostra come utilizzare il file direttiva ng-repeat.

Esempio di ng-repeat

In questo esempio,

  • Avremo un array di nomi di capitoli in una variabile di array e
  • quindi utilizzare la direttiva ng-repeat per visualizzare ciascun elemento dell'array come elemento di elenco

ng-ripetizione in AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Spiegazione:

  1. La direttiva ng-init viene aggiunta al nostro tag div per definire una variabile chiamata "capitoli" che è una variabile array contenente 3 stringhe.
  2. L'elemento ng-repeat viene utilizzato dichiarando una variabile inline chiamata "names" e esaminando ciascun elemento nell'array capitoli.
  3. Infine, mostriamo il valore della variabile inline locale 'names'.

Se il codice viene eseguito correttamente, verrà visualizzato l'output seguente.

Produzione:

ng-ripetizione in AngularJS

  • L'output sopra mostra semplicemente che la direttiva ng-repeat ha preso ogni valore nell'array chiamato "capitoli" e ha creato elementi di elenco HTML per ogni elemento nell'array.

Questi quattro passaggi riguardano l'avvio, i dati, il binding e la ripetizione. L'elenco seguente mostra cosa viene dopo.

Altre direttive AngularJS integrate di uso comune

Le quattro direttive sopra riportate costituiscono il set iniziale, non l'intera libreria. Ciascuna voce seguente è un attributo che si applica direttamente all'elemento che controlla.

  • ng-bind: Scrive un valore di ambito nel testo di un elemento senza mostrare brevemente le parentesi graffe al caricamento.
  • ng-if: Rimuove l'elemento dal DOM quando la sua espressione è falsa e lo ricostruisce quando è vera.
  • ng-show e ng-hide: Toggle visibilità tramite CSS. L'elemento rimane nel DOM, quindi le attivazioni/disattivazioni ripetute hanno un costo inferiore.
  • ng-class: Aggiunge o rimuove classi CSS da un'espressione, consentendo allo stile di seguire il modello.
  • ng-click: Esegue un'espressione o una funzione di ambito quando l'utente fa clic sull'elemento.
  • ng-controller: Collega un controller a un blocco di markup quando la pagina supera le dimensioni di ng-init.
  • ng-disabled e ng-readonly: Imposta l'attributo del modulo corrispondente ogni volta che la loro espressione è vera.

Le FAQ riportate di seguito rispondono alle domande che più spesso seguono questo elenco.

DOMANDE FREQUENTI

AngularJS normalizza i nomi degli attributi prima di associarli. Rimuove qualsiasi prefisso x- o data-, quindi converte i separatori trattino, due punti o underscore in camel case. Ecco perché data-ng-app, x-ng-app e ng:app si risolvono tutti nella stessa direttiva ngApp.

Entrambi stampano un valore di ambito. Un'espressione di interpolazione può mostrare brevemente le sue parentesi graffe grezze prima che AngularJS termini il caricamento, mentre ng-bind lascia l'elemento vuoto fino al completamento della compilazione. È preferibile utilizzare ng-bind per il testo che appare nella parte superiore della pagina.

No. Il supporto ufficiale per AngularJS è terminato a gennaio 2022, quindi non vengono rilasciate ulteriori patch. Le pagine esistenti continuano a funzionare, ma i nuovi progetti dovrebbero essere sviluppati con le versioni più recenti di Angular, dove queste direttive diventano componenti e direttive strutturali come *ngIf e *ngFor.

In parte. Assistenti come Copilota GitHub Riscrivere ng-repeat come *ngFor e ng-if come *ngIf in modo affidabile. L'ereditarietà dello scope, i binding bidirezionali e le funzioni di collegamento personalizzate necessitano ancora di una revisione umana prima del rilascio del codice migrato.

Incolla il markup, la dichiarazione del modulo e l'output della console in ChatGPT e chiede quale direttiva non corrisponde. Solitamente individua un ng-app mancante, un attributo scritto in modo errato o un valore di restrizione che blocca la sintassi scelta.

Riassumi questo post con: