Tutorial sul controller AngularJS con esempio

Sommario:

Anonim

Cos'è il controller in AngularJs?

Un controller in AngularJs prende i dati dalla vista, li elabora e quindi li invia alla vista che viene mostrata all'utente finale. Il Controller avrà la tua logica aziendale principale.

Il controller utilizzerà il modello di dati, eseguirà l'elaborazione richiesta e quindi passerà l'output alla visualizzazione che a sua volta verrà mostrata all'utente finale.

In questo tutorial imparerai-

  • Cosa fa Controller dal punto di vista di Angular
  • Come costruire un controller di base
  • Come definire i metodi nel controller
  • Utilizzo di ng-controller in file esterni

    • Cosa fa Controller dal punto di vista di Angular

    Di seguito è riportata una semplice definizione del funzionamento di Angular JS Controller.

    • La responsabilità principale del titolare del trattamento è controllare i dati che vengono passati alla visualizzazione. Lo scopo e la vista hanno una comunicazione bidirezionale.
    • Le proprietà della vista possono chiamare "funzioni" sull'ambito. Inoltre gli eventi sulla vista possono chiamare "metodi" sullo scope. Il frammento di codice seguente fornisce un semplice esempio di una funzione.
      • La funzione ($ scope) definita durante la definizione del controller e una funzione interna utilizzata per restituire la concatenazione di $ scope.firstName e $ scope.lastName.
      • In AngularJS quando si definisce una funzione come variabile, è nota come metodo.
    • I dati in questo modo passano dal controller all'ambito, quindi i dati passano avanti e indietro dall'ambito alla vista.
    • L'ambito viene utilizzato per esporre il modello alla vista. Il modello può essere modificato tramite metodi definiti nell'ambito che potrebbero essere attivati ​​tramite eventi dalla vista. Possiamo definire l'associazione di modelli a due vie dall'ambito al modello.
    • I controller non dovrebbero essere idealmente usati per manipolare il DOM. Questo dovrebbe essere fatto dalle direttive che vedremo più avanti.
    • La migliore pratica è avere il controller basato sulla funzionalità. Ad esempio, se hai un modulo per l'input e hai bisogno di un controller per questo, crea un controller chiamato "controller del modulo".

    Come costruire un controller di base

    Prima di iniziare con la creazione di un controller, dobbiamo prima avere la nostra configurazione di base della pagina HTML in atto.

    Lo snippet di codice riportato di seguito è una semplice pagina HTML che ha il titolo "Registrazione evento" e contiene riferimenti a librerie importanti come Bootstrap, jquery e Angular.

    1. Stiamo aggiungendo riferimenti ai fogli di stile CSS bootstrap, che verranno utilizzati insieme alle librerie bootstrap.
    2. Stiamo aggiungendo riferimenti alle librerie angularjs. Quindi ora tutto ciò che faremo con angular.js in futuro verrà referenziato da questa libreria.
    3. Stiamo aggiungendo riferimenti alla libreria bootstrap per rendere la nostra pagina web più reattiva per determinati controlli.
    4. Abbiamo aggiunto riferimenti alle librerie jquery che verranno utilizzate per la manipolazione DOM. Ciò è richiesto da Angular perché alcune delle funzionalità di Angular dipendono da questa libreria.

    Per impostazione predefinita, lo snippet di codice sopra sarà presente in tutti i nostri esempi, in modo che possiamo mostrare solo il codice angularJS specifico nelle sezioni successive.

    In secondo luogo, diamo un'occhiata ai nostri file e alla struttura dei file con cui inizieremo per la durata del nostro corso.

    1. Per prima cosa separiamo i nostri file in 2 cartelle come si fa con qualsiasi applicazione web convenzionale. Abbiamo la cartella "CSS". Conterrà tutti i nostri file di fogli di stile a cascata, quindi avremo la nostra cartella "lib" che conterrà tutti i nostri file JavaScript.
    2. Il file bootstrap.css viene inserito nella cartella CSS e viene utilizzato per aggiungere un aspetto gradevole al nostro sito Web.
    3. Angular.js è il nostro file principale che è stato scaricato dal sito angularJS e conservato nella nostra cartella lib.
    4. Il file app.js conterrà il nostro codice per i controller.
    5. Il file bootstrap.js viene utilizzato per integrare il file bootstrap.cs per aggiungere la funzionalità bootstrap alla nostra applicazione web.
    6. Il file jquery verrà utilizzato per aggiungere funzionalità di manipolazione DOM al nostro sito.

    Vediamo un esempio su come utilizzare angular.js,

    Quello che vogliamo fare qui è solo visualizzare le parole "AngularJS" sia in formato testo che in una casella di testo quando la pagina viene visualizzata nel browser.

    


    Guru99 Global Event
    

    Tutorial Name : 
    This tutorial is {{tutorialName}}

    Spiegazione del codice:

    1. La parola chiave ng-app viene utilizzata per indicare che questa applicazione deve essere considerata come un'applicazione angolare. Tutto ciò che inizia con il prefisso "ng" è noto come direttiva. "DemoApp" è il nome dato alla nostra applicazione Angular.JS.
    2. Abbiamo creato un tag div e in questo tag abbiamo aggiunto una direttiva ng-controller insieme al nome del nostro Controller "DemoController". Questo fondamentalmente rende il nostro tag div la possibilità di accedere ai contenuti del Demo Controller. È necessario menzionare il nome del controller sotto la direttiva per assicurarsi di essere in grado di accedere alla funzionalità definita all'interno del controller.
    3. Stiamo creando un'associazione di modelli utilizzando la direttiva ng-model. Ciò che fa è che associa la casella di testo per il nome del tutorial da associare alla variabile membro "tutorialName".
    4. Stiamo creando una variabile membro chiamata "tutorialName" che verrà utilizzata per visualizzare le informazioni che l'utente digita nella casella di testo per il nome del tutorial.
    5. Stiamo creando un modulo che verrà allegato alla nostra applicazione DemoApp. Quindi questo modulo ora diventa parte della nostra applicazione.
    6. Nel modulo, definiamo una funzione che assegna un valore predefinito di "AngularJS" alla nostra variabile tutorialName.

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

    Produzione:

    Poiché abbiamo assegnato alla variabile tutorialName un valore di "Angular JS", questo viene visualizzato nella casella di testo e nella riga di testo normale.

    Come definire i metodi nel controller

    Normalmente, si vorrebbe definire più metodi nel controller per separare la logica di business.

    Ad esempio, supponiamo che se desideri che il tuo controller esegua 2 cose di base

    1. Eseguire l'aggiunta di 2 numeri
    2. Esegui la sottrazione di 2 numeri

    Dovresti quindi idealmente creare 2 metodi all'interno del tuo controller, uno per eseguire l'addizione e l'altro per eseguire la sottrazione.

    Vediamo un semplice esempio di come puoi definire metodi personalizzati all'interno di un controller Angular.JS. Il controller restituirà semplicemente una stringa.

    Event Registration


    Guru99 Global Event
    

    Tutorial Name :

    This tutorial is {{tutorialName}}

    Spiegazione del codice:

    1. Qui stiamo solo definendo una funzione che restituisce una stringa di "AngularJS". La funzione è collegata all'oggetto scope tramite una variabile membro chiamata tutorialName.
    2. Se il comando viene eseguito correttamente, verrà visualizzato il seguente output quando si esegue il codice nel browser.

    Produzione:

    Utilizzo di ng-controller in file esterni

    Diamo un'occhiata a un esempio di "HelloWorld" in cui tutte le funzionalità sono state collocate in un unico file. Ora è il momento di inserire il codice per il controller in file separati.

    Seguiamo i passaggi seguenti per farlo.

    Passaggio 1) Nel file app.js, aggiungi il seguente codice per il tuo controller

    angular.module('app',[]).controller('HelloWorldCtrl',function($scope){$scope.message = "Hello World"});

    Il codice sopra fa le seguenti cose,

    1. Definire un modulo chiamato "app" che manterrà il controller insieme alla funzionalità del controller.
    2. Crea un controller con il nome "HelloWorldCtrl". Questo controller verrà utilizzato per avere una funzionalità per visualizzare un messaggio "Hello World".
    3. L'oggetto ambito viene utilizzato per passare le informazioni dal controller alla vista. Quindi nel nostro caso, l'oggetto scope verrà utilizzato per contenere una variabile chiamata "message".
    4. Stiamo definendo il messaggio variabile e assegnandogli il valore "Hello World".

    Passaggio 2) Ora, nel tuo file Sample.html aggiungi una classe div che conterrà la direttiva ng-controller e quindi aggiungi un riferimento alla variabile membro "message"

    Inoltre, non dimenticare di aggiungere un riferimento al file di script app.js che contiene il codice sorgente per il tuo controller.

    Event Registration


    Guru99 Global Event
    

    {{message}}

    Se il codice sopra è inserito correttamente, il seguente output verrà mostrato quando si esegue il codice nel browser.

    Produzione:

    Sommario

    • La responsabilità principale del controller è creare un oggetto scope che a sua volta viene passato alla vista
    • Come costruire un semplice controller usando le direttive ng-app, ng-controller e ng-model
    • Come aggiungere metodi personalizzati a un controller che può essere utilizzato per separare varie funzionalità all'interno di un modulo angularjs.
    • I controller possono essere definiti in file esterni per separare questo livello dal livello Vista. Questa è normalmente una best practice durante la creazione di applicazioni web.