AngularJS - Menu de navigation
Salut à toi, futurs développeurs web ! Aujourd'hui, nous allons plonger dans le monde passionnant d'AngularJS et apprendre à créer un menu de navigation. En tant que ton professeur d'informatique du coin, je suis là pour te guider à travers ce voyage pas à pas. Alors, prends-toi ta boisson favorite, installe-toi confortablement, et mettons-nous ensemble à cette aventure de codage !
Qu'est-ce qu'un menu de navigation ?
Avant de nous attaquer au code, penchons-nous un instant pour comprendre ce qu'est un menu de navigation. Imagine que tu es dans une énorme bibliothèque avec des millions de livres. Comment trouverais-tu le livre que tu veux ? Tu chercherais probablement des pancartes ou un annuaire, n'est-ce pas ? Eh bien, un menu de navigation sur un site web est exactement comme cet annuaire de bibliothèque. Il aide les utilisateurs à se repérer facilement sur ton site.
Pourquoi utiliser AngularJS pour les menus de navigation ?
Tu te demandes peut-être : "Pourquoi devrais-je utiliser AngularJS pour mon menu de navigation ?" Eh bien, mon ami curieux, AngularJS rend la création de menus dynamiques et interactifs un jeu d'enfant. C'est comme avoir un couteau suisse surpuissant pour le développement web !
Premiers pas avec le menu de navigation AngularJS
Étape 1 : Configuration de ton projet
Première chose première, configurons notre projet. Nous devons inclure AngularJS dans notre fichier HTML. Voici comment on fait :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Mon menu de navigation AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- Notre contenu ira ici -->
<script src="app.js"></script>
</body>
</html>Dans ce code, nous disons à notre HTML que nous utilisons AngularJS en ajoutant ng-app="myApp" à la balise <html>. Nous incluons également la bibliothèque AngularJS et notre propre fichier JavaScript (app.js) où nous écrirons notre code AngularJS.
Étape 2 : Création du module et du contrôleur AngularJS
Maintenant, créons notre module et notre contrôleur AngularJS. Dans ton fichier app.js, ajoute le code suivant :
var app = angular.module('myApp', []);
app.controller('NavController', function($scope) {
$scope.menuItems = [
{ name: 'Accueil', url: '#/' },
{ name: 'À propos', url: '#/about' },
{ name: 'Contact', url: '#/contact' }
];
});Ici, nous créons un module AngularJS appelé myApp et un contrôleur appelé NavController. Le contrôleur contient un tableau d'éléments de menu que nous utiliserons pour générer notre menu de navigation.
Étape 3 : Création du HTML pour le menu de navigation
Maintenant, ajoutez le HTML pour notre menu de navigation. Mettez à jour ton fichier HTML pour inclure ceci :
<body ng-controller="NavController">
<nav>
<ul>
<li ng-repeat="item in menuItems">
<a href="{{item.url}}">{{item.name}}</a>
</li>
</ul>
</nav>
<script src="app.js"></script>
</body>Dans ce code, nous utilisons la directive ng-controller pour dire à AngularJS d'utiliser notre NavController. Nous utilisons également la directive ng-repeat pour boucler sur nos éléments de menu et créer une liste d'items pour chacun.
Fonctionnalités avancées
Ajout de l'état actif aux éléments de menu
Faisons notre menu un peu plus joli en ajoutant un état actif à la page courante. Mettez à jour ton contrôleur dans app.js :
app.controller('NavController', function($scope, $location) {
$scope.menuItems = [
{ name: 'Accueil', url: '#/' },
{ name: 'À propos', url: '#/about' },
{ name: 'Contact', url: '#/contact' }
];
$scope.isActive = function(viewLocation) {
return viewLocation === $location.path();
};
});Et met à jour ton HTML :
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
</li>Maintenant, l'élément de menu de la page courante aura une classe 'active'.
Création d'un menu déroulant
Reprenons de la hauteur et ajoutons un menu déroulant. Met à jour ton contrôleur :
$scope.menuItems = [
{ name: 'Accueil', url: '#/' },
{
name: 'Services',
url: '#/services',
subItems: [
{ name: 'Design web', url: '#/services/web-design' },
{ name: 'SEO', url: '#/services/seo' }
]
},
{ name: 'Contact', url: '#/contact' }
];Et met à jour ton HTML :
<nav>
<ul>
<li ng-repeat="item in menuItems" ng-class="{ active: isActive(item.url) }">
<a href="{{item.url}}">{{item.name}}</a>
<ul ng-if="item.subItems">
<li ng-repeat="subItem in item.subItems">
<a href="{{subItem.url}}">{{subItem.name}}</a>
</li>
</ul>
</li>
</ul>
</nav>Conclusion
Et voilà, les amis ! Tu viens de créer un menu de navigation dynamique et interactif avec AngularJS. Souviens-toi, la pratique rend parfait, alors n'ait pas peur d'expérimenter avec différents styles et fonctionnalités.
Voici un tableau résumant les principales directives AngularJS que nous avons utilisées :
| Directive | But |
|---|---|
| ng-app | Définit l'élément racine d'une application AngularJS |
| ng-controller | Spécifie quel contrôleur utiliser pour l'élément HTML |
| ng-repeat | Répète un ensemble d'HTML un certain nombre de fois |
| ng-class | Lie dynamiquement une ou plusieurs classes CSS à un élément HTML |
| ng-if | Conditionnellement rend un élément HTML |
Continue de coder, continue d'apprendre, et surtout, continue de t'amuser ! Jusqu'à la prochaine fois, c'est ton professeur d'informatique du coin qui signe. Bon codage !
Credits: Image by storyset