AngularJS - Scheda di Ricerca

Ciao, aspiranti programmatori! Oggi esploreremo il mondo emozionante di AngularJS e impareremo a creare una scheda di ricerca. Come il tuo amico insegnante di computer di quartiere, sono qui per guidarti in questo viaggio passo dopo passo. Allora, prenditi una tazza di caffè (o la tua bevanda preferita) e iniziamo!

AngularJS - Search Tab

Introduzione alla Scheda di Ricerca di AngularJS

Prima di immergerci nel codice, capiremo cos'è una scheda di ricerca e perché è utile. Immagina di stanno costruendo un sito web con una grande quantità di dati, come un catalogo bibliotecario o un negozio online. Una scheda di ricerca permette agli utenti di trovare rapidamente ciò che cercano senza scorrere infinite pagine. È come avere un assistente super-intelligente che può recuperare istantaneamente le informazioni di cui hai bisogno!

Configurazione del Nostro Progetto

Prima di tutto, dobbiamo configurare il nostro progetto. Non preoccuparti se non l'hai mai fatto prima - ti guiderò!

Passo 1: Includere la Libreria di AngularJS

Per utilizzare AngularJS, dobbiamo includere la sua libreria nel nostro file HTML. Aggiungi la seguente riga nella sezione <head> del tuo HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Questa riga è come invitare AngularJS alla nostra festa di programmazione. Ci dà accesso a tutte le fantastiche funzionalità che utilizzeremo.

Passo 2: Creare la Struttura HTML

Ora creiamo la struttura di base della nostra scheda di ricerca. Ecco come appare:

<div ng-app="searchApp" ng-controller="searchCtrl">
<input type="text" ng-model="searchText" placeholder="Cerca...">
<ul>
<li ng-repeat="item in items | filter:searchText">{{item}}</li>
</ul>
</div>

Ecco una spiegazione:

ng-app="searchApp": Questo dice ad AngularJS che questo div è la nostra applicazione.
ng-controller="searchCtrl": Questo connette il nostro HTML a un controller che creeremo presto.
ng-model="searchText": Questo lega il campo di input a una variabile chiamata searchText.
ng-repeat="item in items | filter:searchText": Questo crea un elemento della lista per ogni elemento nell'array items, filtrato per searchText.

Creazione del Controller AngularJS

Ora che abbiamo la nostra struttura HTML, creiamo il cervello della nostra applicazione - il controller!

var app = angular.module('searchApp', []);

app.controller('searchCtrl', function($scope) {
$scope.items = ['Mela', 'Banana', 'Ciliegio', 'Dattero', 'Mirtillo', 'Fico', 'Uva'];
});

Ecco cosa sta succedendo:

Creiamo un modulo AngularJS chiamato searchApp.
Definiamo un controller chiamato searchCtrl.
Dentro il controller, creiamo un array di elementi che vogliamo cercare.

Come Funziona Tutto Insieme

Quando digiti nella casella di ricerca, AngularJS aggiorna automaticamente la variabile searchText. La direttiva ng-repeat utilizza poi questo searchText per filtrare l'array items. È come magia, ma in realtà è solo AngularJS che fa il suo lavoro dietro le quinte!

Migliorare la Nostra Scheda di Ricerca

Ora che abbiamo una ricerca di base funzionante, aggiungiamo alcune funzionalità extra!

Ricerca Insensibile alle Maiuscole

Per rendere la nostra ricerca insensibile alle maiuscole (così che "mela" corrisponde a "Mela"), possiamo modificare il nostro filtro:

<li ng-repeat="item in items | filter:searchText:ignoreCase">{{item}}</li>

Funzione di Filtro Personalizzata

Per un filtraggio più complesso, possiamo creare una funzione di filtro personalizzata:

app.controller('searchCtrl', function($scope) {
$scope.items = ['Mela', 'Banana', 'Ciliegio', 'Dattero', 'Mirtillo', 'Fico', 'Uva'];

$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});

Poi nel nostro HTML:

<li ng-repeat="item in items | filter:customFilter">{{item}}</li>

Questa funzione di filtro ci permette di implementare una logica di ricerca più complessa se necessario.

Stile della Nostra Scheda di Ricerca

Non dimentichiamo di rendere gradevole la nostra scheda di ricerca! Ecco un po' di CSS per rendere tutto più bello:

<style>
.search-container {
max-width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
ul {
list-style-type: none;
padding: 0;
}
li {
padding: 8px;
background-color: #f1f1f1;
margin-bottom: 5px;
border-radius: 4px;
}
</style>

Non dimenticare di aggiungere la classe search-container al tuo div principale!

Mettere Tutto Insieme

Ecco il nostro file HTML completo con tutti i pezzi in posto:

<!DOCTYPE html>
<html ng-app="searchApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<style>
/* CSS styles here */
</style>
</head>
<body ng-controller="searchCtrl">
<div class="search-container">
<input type="text" ng-model="searchText" placeholder="Cerca...">
<ul>
<li ng-repeat="item in items | filter:customFilter">{{item}}</li>
</ul>
</div>
<script>
var app = angular.module('searchApp', []);
app.controller('searchCtrl', function($scope) {
$scope.items = ['Mela', 'Banana', 'Ciliegio', 'Dattero', 'Mirtillo', 'Fico', 'Uva'];
$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});
</script>
</body>
</html>

Conclusione

Congratulazioni! Hai appena costruito una scheda di ricerca funzionale utilizzando AngularJS. Dalla configurazione del progetto all'implementazione di filtri personalizzati e all'aggiunta di stile, hai coperto molto terreno. Ricorda, la pratica fa perfezione, quindi non aver paura di sperimentare con diversi set di dati o aggiungere più funzionalità alla tua scheda di ricerca.

Ecco una tabella che riassume i principali direttive e concetti di AngularJS che abbiamo utilizzato:

Direttiva/Concept	Scopo
ng-app	Definisce l'applicazione AngularJS
ng-controller	Specifica il controller per l'applicazione
ng-model	Lega un input a una variabile
ng-repeat	Itera su una collection
filter	Filtra un array in base a criteri
funzione di filtro personalizzata	Permette un filtraggio più complesso

Continua a programmare, rimani curioso e buone ricerche!

Credits: Image by storyset

Tutorial precedente:

AngularJS - Modulo d'Ordine

Prossimo tutorial:

AngularJS - Applicazione Trascinabile