Un guide pratique / Blogs / Perficient

AngulaireJS est un framework JavaScript largement adopté, dotant les développeurs d’un riche arsenal d’outils pour concevoir des applications Web dynamiques et captivantes. Notamment, ses solides capacités de routage apparaissent comme un pilier clé pour la construction Applications à page unique (SPA). Orchestrant efficacement la navigation et présentant dynamiquement des contenus diversifiés sans avoir besoin d’actualisation complète des pages, le routage AngularJS apparaît comme la pierre angulaire du développement Web contemporain. Dans ce guide complet, nous nous lancerons dans une exploration détaillée du routage AngularJS, disséquant méticuleusement ses principes fondamentaux. De plus, nous vous fournirons des exemples tangibles pour favoriser une compréhension et une maîtrise plus approfondies de la navigation dans cet élément vital. Néanmoins, avant d’aborder les complexités du routage AngularJS, il est crucial de prendre un moment pour explorer les avantages inhérents aux applications à page unique (SPA). Ensuite, nous explorerons comment implémenter à la fois une route about et contenu dynamique et une route de produits comme Route dynamique avec des exemples de code pratiques.

Avantages de la création de SPA avec le routage AngularJS

Construire des SPA avec AngularJS apporte une myriade d’avantages aux développeurs et aux utilisateurs finaux. Certains d’entre eux incluent :

Expérience utilisateur améliorée

En demandant uniquement les informations et les ressources nécessaires au serveur, les applications monopages (SPA) maximisent les performances en réduisant la latence et en améliorant la vitesse et l’efficacité globales. Notre méthode optimisée garantit des temps de chargement rapides et améliore l’expérience utilisateur en donnant la priorité à la diffusion de contenu pertinent.

Performance améliorée

Les SPA récupèrent uniquement les enregistrements et les actifs vitaux du serveur, réduisant ainsi la latence et améliorant les performances.

Développement simplifié

AngularJS rationalise le développement en fournissant une conception modulaire basée sur des éléments qui facilite la manipulation et la préservation des applications à grande échelle.

Compatibilité multiplateforme

Les SPA construits avec AngularJS sont intrinsèquement adaptés aux cellules et peuvent être facilement adaptés à divers appareils et tailles d’affichage.

Maintenant que nous avons couvert les avantages des SPA, étudions le routage AngularJS et comment il améliore les applications Internet dynamiques et attrayantes.

Comprendre le routage AngularJS

Le routage AngularJS est basé sur le concept de mappage des URL vers différentes vues ou modèles au sein de l’application. Il permet aux développeurs de définir des routes et d’associer chaque route à un modèle et un contrôleur spécifiques. Lorsqu’un utilisateur accède à une URL particulière, AngularJS charge le modèle et le contrôleur associés, mettant à jour la vue de manière dynamique sans nécessiter un rechargement complet de la page.

Comprendre le contenu dynamique

Le contenu dynamique fait référence aux éléments ou aux données du site Web qui peuvent changer dynamiquement sans nécessiter un rechargement complet de la page. Ce dynamisme permet aux développeurs de créer des expériences utilisateur plus attrayantes et personnalisées en mettant à jour le contenu en temps réel en fonction des interactions des utilisateurs ou d’autres facteurs. Dans AngularJS, le contenu dynamique est généralement obtenu grâce à la liaison de données et à la manipulation des données du modèle.

Comprendre les itinéraires dynamiques

Cependant, les itinéraires dynamiques permettent aux développeurs de définir des itinéraires avec des paramètres dynamiques qui pourraient être échangés principalement en fonction de l’entrée d’une personne ou d’autres situations. Ces paramètres dynamiques agissent comme des espaces réservés dans le chemin de routage, capturant les valeurs de l’URL et permettant le rendu dynamique du contenu. Les routes dynamiques fournissent un mécanisme flexible et puissant pour gérer différents types de contenu au sein d’une application.

Concepts clés

1. ngRoute

ngRoute est un module fourni par AngularJS qui active les capacités de routage dans une application. Il est essentiel d’inclure ce module en tant que dépendance lors de la définition d’une application AngularJS qui utilise le routage.

2. $routeProvider

Le $routeProvider le service est un élément crucial du routage critique. Il permet aux développeurs de configurer des itinéraires au sein d’une application en définissant des chemins d’URL et en les associant à des modèles et des contrôleurs spécifiques.

3. Directive de point de vue

Le ng-view La directive joue un rôle crucial dans AngularJS, indiquant précisément où dans un modèle HTML AngularJS doit injecter le contenu du modèle de la route actuelle. Il s’agit d’un espace réservé pour restituer des perspectives dynamiques basées sur l’itinéraire de pointe.

4. Contrôleurs

Contrôleurs dans AngularJS se trouvent des fonctions JavaScript chargées de définir le comportement et les données associées à une vue particulière. Les contrôleurs jouent un rôle crucial dans la séparation des problèmes au sein d’une application en gérant la logique des vues et les interactions.

5. Modèle

Dans le routage AngularJS, un modèle désigne un fichier HTML représentant une vue distincte au sein de l’application. Ces modèles sont liés à des itinéraires et chargés et rendus dynamiquement en fonction de l’itinéraire actuellement consulté.

6. sinon Méthode

Le sinon() La méthode spécifie un itinéraire par défaut à suivre si l’itinéraire demandé ne correspond à aucun des itinéraires définis. Il garantit que les utilisateurs sont redirigés vers un itinéraire désigné lorsqu’ils accèdent à des URL non reconnues.

Exemple d’implémentation de routage AngularJS

Passons à un exemple pratique pour démontrer le routage AngularJS en action.

Configuration du routage AngularJS

Pour utiliser le routage dans une application AngularJS, vous devez d’abord inclure les bibliothèques AngularJS et ngRoute pour votre entreprise (index.html). Vous pouvez les télécharger depuis le site officiel ou les inclure via un CDN lien dans votre fichier HTML.

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

Vous pouvez également tirer parti des gestionnaires de packages comme MNP pour gérer plus efficacement les dépendances de votre projet.

npm installer la route angulaire angulaire

En vous promenant avec la commande ci-dessus, vous pouvez configurer AngularJS et le module angulaire-path, qui offre des compétences de routage, en tant que dépendances dans votre projet.

Une fois que vous avez inclus AngularJS, vous pouvez définir votre module d’application et configurer le routage à l’aide du $routeProvider service fourni par AngularJS.

routeProvider.js

var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix("");
  $routeProvider
    .when("/", {
      templateUrl: "views/home.html",
      controller: "HomeController",
    })
    .when("/about", {
      templateUrl: "views/about.html",
      controller: "AboutController",
    })
    .when("/product/:id", {
      templateUrl: "views/product.html",
      controller: "ProductController",
    })
    .otherwise({ redirectTo: "/" });
});

app.controller("MainController", function ($scope) {
  // MainController logic here
});

Dans le code ci-dessus :

• Nous définissons le module d’application `monApp` et précisez la dépendance à l’égard du `ngRoute` module, qui fournit des capacités de routage.
• Nous configurons les itinéraires en utilisant le `$routeProvider.when()` Méthode. Chaque définition de route se compose d’un chemin d’URL, d’une URL de modèle et, éventuellement, d’un contrôleur.
• Nous avons ajouté le $locationProvider.hashPrefix(”) configuration pour supprimer la valeur par défaut hashbang (#!) à partir de l’URL.
• Le `sinon()` La méthode spécifie l’itinéraire par défaut à parcourir si l’itinéraire demandé ne correspond à aucun itinéraire défini.

Création de vues et de contrôleurs

Maintenant que nous avons configuré le routage, créons les vues et les contrôleurs pour nos itinéraires.

Vue d’accueil et contrôleur

Créez un fichier nommé home.html dans un répertoire appelé views. Ce sera le modèle de l’itinéraire d’origine.

accueil.html

<div ng-controller="HomeController">
  <h1>Welcome to the Home Page</h1>
  <p>This is the home page of our AngularJS application.</p>
</div>

Ensuite, créez un contrôleur nommé HomeController dans le fichier routeProvider.js.

routeProvider.js

app.controller("HomeController", function ($scope) {
  //Home Controller logic here
});

Implémentation de contenu et d’itinéraires dynamiques

Voyons maintenant comment nous pouvons implémenter à la fois une route about en tant que contenu dynamique et une route produit en tant que route dynamique dans une application AngularJS.

À propos de la vue et du contrôleur en tant que contenu dynamique

Observons comment nous pouvons appliquer du contenu dynamique dans AngularJS. De même, créez un rapport nommé about.html dans le perspectives référencement.

à propos de.html

<div ng-controller="AboutController">
  <h1>{{ pageTitle }}</h1>
  <p>{{ pageContent }}</p>
</div>

Dans ce modèle about.html :

• Nous utilisons des expressions AngularJS ({{ }}) pour restituer dynamiquement le titre et le contenu de la page, qui sont liés aux variables de portée correspondantes (titre de la page et Contenu de la page) défini dans le À propos du contrôleur.
• Lors de la navigation sur la page À propos, les utilisateurs verront le titre et le contenu renseignés dynamiquement.

Dans le À propos du contrôleur, nous pouvons définir dynamiquement le titre et le contenu de la page en fonction des paramètres d’itinéraire ou de toute autre logique spécifique à la page à propos. Ensuite, définissez le <strong>AboutController</strong> en ajoutant le code mentionné dans le fichier routeProvider.js.

routeProvider.js

app.controller("AboutController", function ($scope) {
  $scope.pageTitle = "About Us";
  $scope.pageContent = "Learn more about our company and mission here.";
});

Vue du produit et contrôleur comme route dynamique

Créez le modèle de vue du produit (produit.html) et définir le contrôleur correspondant (Contrôleur de produit) pour gérer les données produit dynamiques.

produit.html

<div ng-controller="ProductController">
  <h1>Product Details</h1>
  <p>ID: {{ productId }}</p>
</div>

Dans le modèle product.html ci-dessus, nous affichons les détails du produit, y compris l’ID du produit obtenu à partir du service $routeParams.

Ensuite, définissez le ‘Contrôleur de produit’ en ajoutant le code mentionné dans le fichier routeProvider.js.

routeProvider.js

app.controller('ProductController', function($scope, $routeParams) {
  $scope.productId = $routeParams.id;
  // Fetch product data based on the ID and update the view
});

Le Contrôleur de produit extrait l’ID du produit des paramètres d’itinéraire et peut ensuite l’utiliser pour récupérer les données du produit correspondantes à partir du serveur ou d’une autre source de données.

Relier les itinéraires à la navigation

Pour une navigation fluide entre différents itinéraires, tirez parti du ng-href directive dans votre code HTML pour établir des liens vers différents chemins spécifiés dans vos définitions d’itinéraire.

index.html

<div ng-controller="MainController">
  <ul>
    <li><a ng-href="#/">Home</a></li>
    <li><a ng-href="#/about">About</a></li>
    <li><a ng-href="#/product/1">Product 1</a></li>
    <li><a ng-href="#/product/2">Product 2</a></li>
  </ul>
  <div ng-view></div>
</div>

Note: Lors de l’implémentation du routage AngularJS, n’oubliez pas d’ajouter le ng-app = « monapplication » attribuer à l’ouverture balise dans votre fichier index.html. De plus, liez le routeProvider.js fichier dans votre index.html pour activer la fonctionnalité de routage.

Le ng-view La directive est un espace réservé où AngularJS injectera les modèles associés à la route actuelle.

Sortir

Conclusion

Le routage AngularJS fournit un mécanisme puissant pour créer des SPA en permettant la navigation entre différentes vues sans rechargement de page. Les développeurs peuvent créer des applications Web dynamiques et interactives en configurant des itinéraires, en définissant des modèles et en les reliant aux contrôleurs. Avec les exemples et explications fournis dans ce guide, vous devriez maintenant comprendre Routage AngularJS et soyez bien équipé pour en tirer parti dans vos projets.

N’oubliez pas d’explorer une documentation plus approfondie et les meilleures pratiques pour améliorer votre implémentation de routage et créer des expériences utilisateur transparentes dans vos applications AngularJS. Bon codage !