AngularJS - Onglet de recherche

Bonjour, aspirants programmeurs ! Aujourd'hui, nous allons plonger dans l'univers passionnant d'AngularJS et apprendre à créer un onglet de recherche. En tant que votre enseignant d'informatique de quartier, je suis là pour vous guider à travers ce périple étape par étape. Alors, prenez une tasse de café (ou votre boisson favorite) et mettons-nous en route !

AngularJS - Search Tab

Introduction à l'onglet de recherche AngularJS

Avant de nous lancer dans le code, comprenons ce qu'est un onglet de recherche et pourquoi il est utile. Imaginez que vous construisez un site web avec une grande quantité de données, comme un catalogue de bibliothèque ou une boutique en ligne. Un onglet de recherche permet aux utilisateurs de trouver rapidement ce qu'ils cherchent sans défiler des pages sans fin. C'est comme avoir un assistant super-intelligent qui peut instantanément récupérer l'information dont vous avez besoin !

Configuration de notre projet

Premièrement, nous devons configurer notre projet. Ne vous inquiétez pas si vous n'avez jamais fait cela auparavant - je vais vous guider !

Étape 1 : Inclure la bibliothèque AngularJS

Pour utiliser AngularJS, nous devons inclure sa bibliothèque dans notre fichier HTML. Ajoutez la ligne suivante dans la section <head> de votre HTML :

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

Cette ligne est comme inviter AngularJS à notre fête de codage. Elle nous donne accès à toutes les fonctionnalités sympas que nous allons utiliser.

Étape 2 : Créer la structure HTML de base

Maintenant, créons la structure de base de notre onglet de recherche. Voici à quoi elle ressemble :

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

Décomposons cela :

ng-app="searchApp" : Cela indique à AngularJS que ce div est notre application.
ng-controller="searchCtrl" : Cela connecte notre HTML à un contrôleur que nous allons créer bientôt.
ng-model="searchText" : Cela lie le champ d'entrée à une variable appelée searchText.
ng-repeat="item in items | filter:searchText" : Cela crée un élément de liste pour chaque élément dans notre tableau items, filtré par searchText.

Création du contrôleur AngularJS

Maintenant que nous avons notre structure HTML, créons le cerveau de notre application - le contrôleur !

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

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
});

Voici ce qui se passe :

Nous créons un module AngularJS appelé searchApp.
Nous définissons un contrôleur nommé searchCtrl.
À l'intérieur du contrôleur, nous créons un tableau d'items que nous voulons filtrer.

Comment tout fonctionne ensemble

Lorsque vous tapez dans la zone de recherche, AngularJS met automatiquement à jour la variable searchText. La directive ng-repeat utilise alors cette searchText pour filtrer le tableau items. C'est comme de la magie, mais en réalité c'est juste AngularJS qui fait son travail en arrière-plan !

Amélioration de notre onglet de recherche

Maintenant que nous avons une recherche de base fonctionnelle, ajoutons quelques fonctionnalités supplémentaires !

Recherche insensible à la casse

Pour rendre notre recherche insensible à la casse (ainsi "apple" correspond à "Apple"), nous pouvons modifier notre filtre :

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

Fonction de filtre personnalisée

Pour un filtrage plus complexe, nous pouvons créer une fonction de filtre personnalisée :

app.controller('searchCtrl', function($scope) {
$scope.items = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];

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

Ensuite dans notre HTML :

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

Cette fonction de filtre nous permet d'implémenter une logique de recherche plus complexe si nécessaire.

Style de notre onglet de recherche

Ne négligeons pas de rendre notre onglet de recherche attractif ! Voici un peu de CSS pour l'embellir :

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

N'oubliez pas d'ajouter la classe search-container à votre div principal !

Rassembler tous les éléments

Voici notre fichier HTML complet avec tous les éléments en place :

<!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="Rechercher...">
<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 = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
$scope.customFilter = function(item) {
if (!$scope.searchText) return true;
return item.toLowerCase().indexOf($scope.searchText.toLowerCase()) !== -1;
};
});
</script>
</body>
</html>

Conclusion

Félicitations ! Vous venez de créer un onglet de recherche fonctionnel avec AngularJS. De la configuration du projet à l'implémentation de filtres personnalisés et à l'ajout de styles, vous avez couvert beaucoup de terrain. Souvenez-vous, la pratique rend parfait, donc n'ayez pas peur d'expérimenter avec différents ensembles de données ou d'ajouter plus de fonctionnalités à votre onglet de recherche.

Voici un tableau récapitulatif des principales directives et concepts AngularJS que nous avons utilisés :

Directive/Concept	Objectif
ng-app	Définit l'application AngularJS
ng-controller	Spécifie le contrôleur pour l'application
ng-model	Lie un champ d'entrée à une variable
ng-repeat	Itère sur une collection
filter	Filtre un tableau en fonction de critères
fonction de filtre personnalisée	Permet un filtrage plus complexe

Continuez à coder, restez curieux, et bon recherche !

Credits: Image by storyset

Tutoriel précédent:

AngularJS - Formulaire de commande

Tutoriel suivant:

AngularJS - Application de Glissement