Controller AngularJS con esempio ng-Controller

Cosa fa il Controller dal punto di vista di Angular?

Di seguito una semplice definizione del funzionamento di AngularJS Controller:

• La responsabilità principale del controller è controllare i dati che vengono passati alla vista. L'ambito e la vista hanno una comunicazione bidirezionale.
• Le proprietà della vista possono chiamare "funzioni" nell'ambito. Inoltre gli eventi sulla vista possono richiamare “metodi” sull'ambito. Il frammento di codice seguente fornisce un semplice esempio di una funzione.
• . funzione($ambito) che viene definito durante la definizione del controller e una funzione interna che viene utilizzata per restituire la concatenazione di $ scope.firstName e $ scope.lastName.
• In AngularJS, quando definisci una funzione come variabile, è nota come Metodo.

• I dati in questo modo passano dal controller all'ambito, quindi 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 un'associazione di modelli bidirezionale 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 pratica migliore è quella di avere controller basati sulla funzionalità. Ad esempio, se hai un modulo per l'input e hai bisogno di un controller per quello, crea un controller chiamato "form controller".

Come costruire un controller di base in AngularJS

Di seguito sono riportati i passaggi per creare un controller in AngularJS:

Passaggio 1) Crea una pagina HTML di base

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

Lo snippet di codice seguente è una semplice pagina HTML con il titolo "Registrazione evento" e riferimenti a librerie importanti come Bootstrap, jquery e angolare.

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 qualunque cosa faremo con angular.js in futuro verrà fatto riferimento a 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 del DOM. Ciò è richiesto da Angular perché alcune delle funzionalità di Angular dipendono da questa libreria.

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

Passaggio 2) Controlla i file e la struttura dei file

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 e quindi avremo la nostra cartella "lib" che conterrà tutti i nostri file JavaCopione File.
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 funzionalità bootstrap alla nostra applicazione web.
6. Il file jquery verrà utilizzato per aggiungere funzionalità di manipolazione DOM al nostro sito.

Passaggio 3) Utilizzare il codice AngularJS per visualizzare l'output

Ciò che vogliamo fare qui è semplicemente visualizzare le parole "AngularJS" sia in formato testo che in una casella di testo quando la pagina viene visualizzata nel browser. Vediamo un esempio su come usare angular.js per farlo:

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">

	Tutorial Name : <input type="text" ng-model="tutorialName"><br>

	This tutorial is {{tutorialName}}
</div>
<script>
	var app = angular.module('DemoApp',[]);

	app.controller('DemoController', function($scope){
	$scope.tutorialName = "Angular JS";
	});
</script>

</body>
</html>

Spiegazione del codice:

1. . ng-app La parola chiave viene utilizzata per indicare che questa applicazione deve essere considerata un'applicazione angolare. Tutto ciò che inizia con il prefisso 'ng' è noto come a Direttive. "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". Ciò fondamentalmente rende il nostro tag div la possibilità di accedere ai contenuti del Demo Controller. È necessario menzionare il nome del titolare del trattamento ai sensi della direttiva per garantire di poter accedere alle funzionalità definite all'interno del titolare del trattamento.
3. Stiamo creando un binding di modello usando la direttiva ng-model. Ciò che fa è che vincola la casella di testo per Tutorial Name da vincolare alla variabile membro "tutorialName".
4. Stiamo creando una variabile membro denominata "tutorialName" che verrà utilizzata per visualizzare le informazioni digitate dall'utente nella casella di testo per il nome del tutorial.
5. Stiamo creando un modulo che verrà collegato 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, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Produzione:

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

Come definire i metodi nei controller AngularJS

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

Ad esempio, supponiamo che tu voglia che il tuo controller esegua 2 cose fondamentali,

1. Esegui l'addizione di 2 numeri
2. Esegui la sottrazione di 2 numeri

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

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

<!DOCTYPE html>
<html>
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
	Tutorial Name :<input type="text" ng-model="tutorialName"><br>
	<br>
	This tutorial is {{tutorialName}}	
</div>

<script>
var app = angular.module('DemoApp', []);
app.controller('DemoController', function($scope) {
    $scope.tutorialName = "Angular JS";
	$scope.tName = function() {
        return $scope.tName;
    };
});
</script>	
</body>
</html>

Spiegazione del codice:

1. Qui stiamo semplicemente 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, quando si esegue il codice nel browser verrà visualizzato il seguente output.

Produzione:

Controller AngularJS con esempio di controller ng

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

Seguiamo i passaggi seguenti per fare ciò:

Passo 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 riportato esegue le seguenti operazioni:

1. Definire un modulo chiamato "app" che manterrà il controller insieme alle 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 scope viene utilizzato per passare informazioni dal controller alla vista. Quindi, nel nostro caso, l'oggetto scope verrà utilizzato per contenere una variabile chiamata "messaggio".
4. Stiamo definendo la variabile messaggio e assegnandogli il valore "Hello World".

Passo 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.

<!DOCTYPE html>
<html ng-app="app">
<head>
	<meta chrset="UTF 8">
	<title>Event Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css"/>
</head>
<body>
<h1> Guru99 Global Event</h1>
<div class="container">
	<div ng-controller="HelloWorldCtrl">{{message}}</div>
</div>

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/jquery-1.11.3.min.js"></script>

<script src="app.js"></script>

</body>
</html>

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

Produzione:

Sintesi

• La responsabilità principale del controller è creare un oggetto ambito che a sua volta viene passato alla vista
• Come costruire un semplice controller utilizzando 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 procedura consigliata quando si creano applicazioni Web.