Share
Les applications d'une seule page vous permettent d'actualiser une certaine partie d'une page Web en acheminant tout contenu stocké dans un fichier .html distinct. Ce faisant, vous ne rechargez pas votre page principale.
AngularJS fournit un module nommé ngRoute exactement à cet effet.
Un autre module utile de AngularJS est ngAnimate, ce qui facilite l'animation avec certaines classes CSS..
Dans ce tutoriel, je vais essayer d’expliquer chaque étape de manière approfondie, bien que vous ayez encore besoin de connaissances de base en AngularJS pour pouvoir suivre.
Ce fichier index.html va être notre page principale où nous avons du contenu fixe et routé.
Je vais commencer par un document HTML de base et inclure toutes les bibliothèques nécessaires ainsi que notre feuille de style personnalisée nommée style.css et un fichier JavaScript angularApp.js.
Maintenant, j'ajoute deux DIV avec les noms d'identifiant de fixeContenu et routedContent à l'intérieur d'un mainWrapper DIV.
routedContent est également enveloppé dans une autre DIV nommée emballage. C'est parce que le routedContent doit être positionné de manière absolue par rapport à une division parent, car lors de l’animation de routage, deux éléments de contenu différents se heurtent..
Comme l'indiquent les noms, fixeContenu sera le contenu statique de notre page principale, et routedContent changera dynamiquement lors de l'interaction de l'utilisateur.
Afin de définir une application angulaire dans notre fichier HTML, nous devons utiliser le ng-app directif. Comme toute la page sera une application angulaire, nous devons attribuer cette directive au mainWrapper DIV.
Nous avons aussi besoin de ng-view directive, qui indique à la DIV qu'elle est assignée pour afficher le contenu de la page routée.
Maintenant notre fichier index.html ressemble à ceci:
Nous avons besoin d’un menu de navigation pour acheminer différents éléments de contenu vers ng-view.
Nous allons utiliser le ul et une éléments pour créer un menu horizontal simple. Ci-dessous, vous pouvez voir l'extrait de code HTML pour la structure de menu.
Page1 Page2 Page3 Page4
Par défaut, le ng-route module utilise le ! préfixe. Cependant, ici nous utilisons seulement # en face de nos pages pour être acheminé. Ceci est fait avec le hashPrefix attribut utilisé dans la configuration, que je vais expliquer plus tard dans la section correspondante. Pour l'instant, prends-le comme il est.
Notre fichier HTML final est le suivant:
Page1 Page2 Page3 Page4
Puisque ce tutoriel est axé sur AngularJS, je ne vais pas détailler le style CSS. Si vous avez déjà des connaissances en CSS, stylisez la page comme vous le souhaitez. Sinon, vous pouvez utiliser le style que je fournis ci-dessous.
html, body margin: 0; rembourrage: 0; #mainWrapper display: flex; direction de flexion: colonne; align-items: centre; margin-top: 50px #fixedContent margin-bottom: 50px; #wrapper width: 350px; #routedContent width: 350px; position: absolue; ul display: flex; justifier-contenu: espace-entre; largeur: 350px; marge: 0; rembourrage: 0; a text-decoration: none; couleur: #FFFFFF; famille de polices: Arial; style de liste: aucun; couleur de fond: #cecece; rembourrage: 7px 10px; border-radius: 2px;
Chaque page qui sera acheminée vers DIV avec le ng-view directive à l'intérieur du fichier HTML principal peut avoir une structure HTML unique et un style CSS.
Commençons avec page1.html.
Puisque nous voulons un style spécifique pour chaque page, nous avons besoin de fichiers CSS distincts pour chaque page. Par conséquent, nous créons également un fichier nommé page1.css, qui contiendra les règles de style de page1.html.
La structure HTML de base pour page1 est la suivante:
Page 1
Lorem ipsum dolor sit amet, consectetur elit adipiscing, sed eiusmod tempor incidid ut labore et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
En haut, nous avons lié le fichier CSS qui va styler la page, et nous avons déclaré une DIV avec le nom id de Page 1, où tout le contenu sera déposé.
Je vais rester simple, mais c'est à vous de décider comment structurer le fichier HTML. N'oubliez pas que votre conteneur sera toujours la DIV à laquelle le ng-view la directive est assignée. Donc, tout dans vos pages routées sera relatif à cette DIV.
Le style de page1.html est donné ci-dessous:
# page1 font-family: Arial; h1 color: # ffa42a;
Les trois autres pages peuvent être totalement différentes, mais par souci de simplicité, j’utilise simplement le même modèle pour chaque page HTML et des fichiers CSS légèrement différents (différents h1 couleurs du texte).
Page 2
Ut enim ad minima veniam, quis nostrum exercitem ullam corporis suscipit laboriosam, sans aucun aliquid ex ea commodi conséqui? Quis autem vel eum iure reprehenderit qui in a voluptate velit esse quam nihil molestiae conséquatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page2 font-family: Arial; h1 color: cornflowerblue;
Page 3
Lorem ipsum dolor sit amet, consectetur elit adipiscing, sed eiusmod tempor incidid ut labore et dolore magna aliqua. Tout en un minimum de poids, l’exercice de nos exercices en cours de travail, mais il n’existe que d’excellents résultats. Duis aute irure dolor in reprrehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
# page3 font-family: Arial; h1 color: # b2ce6f;
Page 4
Ut enim ad minima veniam, quis nostrum exercitem ullam corporis suscipit laboriosam, sans aucun aliquid ex ea commodi conséqui? Quis autem vel eum iure reprehenderit qui in a voluptate velit esse quam nihil molestiae conséquatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
# page4 font-family: Arial; h1 color: # ff4517;
Jusqu'à présent, nous avons complété tous les fichiers HTML et CSS nécessaires. Maintenant il est temps d'écrire le code JavaScript qui contrôle le routage et l'animation.
Depuis notre ng-app la directive est nommée mainApp, nous utilisons cet identifiant dans la fonction module. Nous devons également inclure le ngRoute et ngAnimate les dépendances.
mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']);
Maintenant nous avons accès à $ routeProvider et $ locationFournisseur.
Nous allons utiliser le $ routeProvider pour gérer les parcours et $ locationFournisseur pour changer le hashPrefix, qui est mis à ! par défaut.
Nous utilisons .when ('/ page1', templateUrl: 'page1.html') pour définir la page à acheminer quand Page 1 est cliqué dans notre fichier HTML principal.
Nous répétons la même ligne de code pour chaque page à acheminer. À la fin, nous utilisons .sinon (redirectTo: '/ page1'), qui gère les noms de page inattendus. Si vous essayez de visiter un nom de page non défini, dites page5, vous serez redirigé vers Page 1.
Le code JavaScript complet est ci-dessous:
Accentsconagua
var mainAngular = angular.module ('mainApp', ['ngRoute', 'ngAnimate']); mainAngular.config (function ($ routeProvider, $ locationProvider) $ routeProvider .when ('/ page1', templateUrl: 'page1.html') .when ('/ page2', templateUrl: 'page2.html' ) .when ('/ page3', templateUrl: 'page3.html') .when ('/ page4', templateUrl: 'page4.html') .otherwise (redirectTo: '/ page1'); $ locationProvider.hashPrefix ("););Note supplémentaire:Si vous souhaitez ajouter un spécifique ng-contrôleur directive pour toutes les pages à acheminer, vous pouvez gérer cela à l'intérieur du $ routeProvider.
Un exemple pour Page 1:
.when ('/ page1', templateUrl: 'page1.html', contrôleur: 'page1Controller')En fin de compte, notre page devrait ressembler à ceci et vous devriez pouvoir naviguer entre les pages sans animations de transition..
Il est maintenant temps d'animer les transitions de route.
Pour l'animation, AngularJS a des classes CSS intégrées grâce à la dépendance ngAnimate.
Les classes que nous allons utiliser sont:
ng-enter: Les styles CSS de départ pour l'animation enter.ng-enter-active: Les styles CSS de finition pour l'animation enter.ng-quitter: Les styles CSS de départ pour l'animation de congé.ng-leave-active: Les styles CSS de finition pour l'animation de congé.Donc, le contenu routé qui arrive dans la page principale a une transition de ng-enter à ng-enter-active. De même, le contenu de la page principale quitte le ng-quitter à ng-leave-active.
Nous devons attacher les classes mentionnées ci-dessus à notre routedContent classe.
Un exemple de transition est donné ci-dessous. Vous pouvez créer vos propres animations de transition ou utiliser celle-ci dans votre style.css fichier.
# routedContent.ng-enter transform: translateX (-500px); opacité: 0; -webkit-transition: tous les 0.35s cubes-bezier (1, .01,0, .99); -moz-transition: toutes les 0,35s de Bézier-cube (1, 0,01, 0,99); -ms-transition: toutes les 0,35s de Bézier cubique (1, 0,01,0, 0,99); -o-transition: toutes les 0,35s de Bézier-cube (1, 0,01, 0,99); transition: tous les 0,35s de Bézier cube (1, 0,01, 0, 99); # routedContent.ng-enter-active transform: translateX (0px); opacité: 1; # routedContent.ng-leave transform: translateX (0); opacité: 1; -webkit-transition: tous les 0.35s cubes-bezier (1, .01,0, .99); -moz-transition: toutes les 0,35s de Bézier-cube (1, 0,01, 0,99); -ms-transition: toutes les 0,35s de Bézier cubique (1, 0,01,0, 0,99); -o-transition: toutes les 0,35s de Bézier-cube (1, 0,01, 0,99); transition: tous les 0,35s de Bézier cube (1, 0,01, 0, 99); # routedContent.ng-leave-active transform: translateX (500px); opacité: 0;
Ci-dessous le résultat final du projet sur Plunker.
Dans ce didacticiel, nous avons expliqué comment créer des applications SPA avec le ng-route module de AngularJS, puis nous avons animé les transitions à travers les classes CSS de ng-animate.
En utilisant seulement quatre classes CSS fournies par ng-animate, vous pouvez réaliser diverses animations. Vous pouvez toujours attacher des classes supplémentaires pour avoir plus de contrôle sur les animations de transition. Par exemple, vous pouvez rendre vos transitions de page sensibles à la direction.
J'ai également mentionné qu'en attachant le manette directive à chaque page spécifique à l'intérieur de la $ routeProvider, vous pouvez obtenir un contrôle supplémentaire sur chaque page.
JavaScript, avec ses bibliothèques telles que Angular, est devenu l’un des langages de facto du travail sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreux cadres et bibliothèques pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
J'espère que ce tutoriel vous a donné une idée générale de la façon d'utiliser le ng-route et ng-animate modules ensemble.
