Direttiva AngularJS con esempio: ng-init, ng-repeat, ng-app, ng-model

Sommario:

Anonim

Cos'è una direttiva AngularJS?

Una direttiva in AngularJS è un comando che fornisce nuove funzionalità all'HTML. Quando angular passa attraverso il codice HTML, prima troverà le direttive nella pagina e quindi analizzerà la pagina HTML di conseguenza.

Un semplice esempio di una direttiva AngularJS, che abbiamo visto nei capitoli precedenti, è la "direttiva ng-model". Questa direttiva viene utilizzata per legare il nostro modello di dati alla nostra vista.

Nota: puoi avere codice angolare di base in una pagina HTML con le direttive ng-init, ng-repeat e ng-model senza la necessità di avere controller. La logica di queste direttive è nel file Angular.js fornito da Google. I controller sono i costrutti di programmazione angolare di livello successivo che consentono la logica di business, ma come accennato affinché un'applicazione sia un'applicazione angolare non è obbligatorio avere un controller.

In questo tutorial imparerai-

  • Come creare la direttiva
  • ng-app
  • ng-init
  • ng-model
  • ng-repeat

Come creare la direttiva

Come abbiamo definito nell'introduzione, le direttive AngularJS sono un modo per estendere la funzionalità dell'HTML.

Ci sono 4 direttive definite in AngularJS.

Di seguito è riportato l'elenco delle direttive AngularJS insieme agli esempi forniti per spiegare ciascuna di esse.

1) ng-app

Viene utilizzato per inizializzare un'applicazione Angular.JS. Quando questa direttiva è in atto in una pagina HTML, in pratica dice ad Angular che questa pagina HTML è un'applicazione angular.js.

L'esempio seguente mostra come utilizzare la direttiva ng-app. In questo esempio, mostreremo semplicemente come trasformare una normale applicazione HTML in un'applicazione angularJS.

Event Registration

Guru99 Global Event


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

Spiegazione del codice:

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

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

Produzione:

L'output mostra chiaramente l'output dell'espressione che è stato reso possibile solo perché abbiamo definito l'applicazione come un'applicazione angularjs.

2) ng-init

Viene utilizzato per inizializzare i dati dell'applicazione. A volte potresti richiedere alcuni dati locali per la tua applicazione, questo può essere fatto con la direttiva ng-init.

L'esempio seguente mostra come utilizzare la direttiva ng-init.

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

Event Registration

Guru99 Global Event


Tutorial Name : {{ TutorialName}}

Spiegazione del codice:

  1. La direttiva ng-init viene aggiunta al nostro tag div per definire una variabile locale chiamata "TutorialName" e il valore dato a questa è "AngularJS".
  2. Stiamo usando espressioni in AngularJs per visualizzare l'output del nome della variabile "TutorialName" definito nella nostra direttiva ng-init.

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

Produzione:

Nell'output,

  • Il risultato mostra chiaramente l'output dell'espressione che contiene la stringa "AngularJS". Questo è il risultato dell'assegnazione della stringa "AngularJS" alla variabile "TutorialName" nella sezione ng-init.

3) ng-model

Infine, abbiamo la direttiva ng-model, che viene utilizzata per associare il valore di un controllo HTML ai dati dell'applicazione. L'esempio seguente mostra come utilizzare la direttiva ng-model.

In questo esempio,

  • Creeremo 2 variabili chiamate "quantità" e "prezzo". Queste variabili verranno associate a 2 controlli di input di testo.
  • Verrà quindi visualizzato l'importo totale in base alla moltiplicazione dei valori di prezzo e quantità.

Event Registration

Guru99 Global Event


People : Registration Price : Total : {{quantity * price}}

Spiegazione del codice:

  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 usando la direttiva ng-model per associare le caselle di testo di "Persone" e "Prezzo di registrazione" rispettivamente alle nostre variabili locali "quantità" e "prezzo".
  3. Infine, stiamo mostrando il totale tramite un'espressione, che è la moltiplicazione delle variabili di quantità e prezzo.

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

Produzione:

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

Ora, se vai nelle caselle di testo e modifichi il valore del prezzo Persone e Registrazione, il Totale cambierà automaticamente.

  • L'output sopra mostra solo la potenza del data binding in angularJs, che si ottiene con l'uso della direttiva ng-model.

4) ng-repeat

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

In questo esempio,

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

Event Registration

Guru99 Global Event




    

  • {{names}}
    •

Spiegazione del codice:

  1. La direttiva ng-init viene aggiunta al nostro tag div per definire una variabile chiamata "chapters" che è una variabile array contenente 3 stringhe.
  2. L'elemento ng-repeat viene utilizzato dichiarando una variabile inline chiamata "nomi" e passando in rassegna ogni elemento nell'array dei capitoli.
  3. Infine, stiamo mostrando il valore dei "nomi" della variabile inline locale.

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

Produzione:

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

Sommario

  • Le direttive vengono utilizzate per estendere la funzionalità dell'HTML. Angular fornisce direttive integrate come
    • ng-app: viene utilizzato per inizializzare un'applicazione angolare.
    • ng-init - Viene utilizzato per creare variabili dell'applicazione
    • ng-model: viene utilizzato per associare i controlli HTML ai dati dell'applicazione
    • ng-repeat - Utilizzato per ripetere gli elementi utilizzando angular.