article(s) dans votre panier VOIR

Comment créer un composant avec des onglets avec Angular JS

  • Vidéo 19 sur 31
  • 4h11 de formation
  • 31 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Création d'un composant avec des onglets
00:00 / 12:10
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
49,90€
  • Téléchargement + VOD à vie
  • Exercice / Validation des acquis
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce cours en ligne, l’auteur vous apprend la création d'un composant avec des onglets dans Angular JS. Le but est de parvenir à générer des composants avec des onglets. Pour commencer, vous entrez tout d’abord dans votre fichier main.js. Dans ce fichier, vous créez un tableau dans lequel vous indiquez le nom de tous les onglets. Cette action faite, vous passez dans votre index.html afin d’afficher les noms des onglets. Pour cela, vous utilisez une balise li dans laquelle vous ajoutez une directive ng-repeat afin de prendre les onglets en question. Dans le bloc li, vous ajoutez un lien à partir de la balise a et son attribut href. Vous ajoutez également ng-click = ‘’setActive($index)’’, puis {{le nom de l’onglet}}. Cette étape effectuée, vous devez ajouter le contenu de l’onglet actif. Pour ce faire, vous créez une fonction $scope.setActive. Dans cette fonction, vous désignez une variable $scope.setActive qui prend l’index courant des onglets. En actualisant votre navigateur, vous observez que les différents onglets s’affichent. Pour conclure, vous pouvez constater que la création d’onglet dans Angular JS se fait en quelque ligne de code.