Comment écrire du code modulaire avec une interface utilisateur angulaire et des vues nommées

Points de base

• Le routeur d'interface utilisateur angulaire est un outil puissant pour gérer différents états dans des applications Web complexes, fournissant plus de contrôle sur chaque vue que les implémentations de routage AngularJS natives. Il utilise la notation DOT pour définir les états d'enfants dans l'état parent et utilise des noms absolus pour contrôler où des parties spécifiques de l'application Web sont affichées, permettant une conception d'application modulaire.
• Le routeur UI permet aux développeurs de définir un objet $stateProvider dans views qui définit le nom de la vue et son chemin vers le modèle. Une vue anonyme pointe vers l'état parent (appelé dénomination relative). Les vues nommées utilisent la syntaxe @ pour cartographier les composants à un état spécifique (appelé dénomination absolue).
• La dénomination absolue rend le code extrêmement modulaire, permettant aux développeurs de réutiliser des modèles tout au long de leur application ou dans de futurs projets. Il simplifie également la façon d'utiliser différents composants d'une application Web, tels que les en-têtes et les pieds de page, ce qui permet d'économiser du temps et des efforts.

L'écriture du code modulaire concis est l'un des concepts les plus importants du développement Web, en particulier lorsque les équipes travaillent ensemble pour développer des applications très complexes. Le cadre angulaire est conçu pour créer des applications avancées qui peuvent rapidement devenir très complexes, ce qui rend à son tour la rédaction du code modulaire encore plus important. Le routeur d'interface utilisateur angulaire est un outil qui peut vous aider grandement à y parvenir, et il est conçu pour aider à gérer les différents états de votre application Web. Il vous donne un contrôle complet sur chacune de ses vues par rapport à l'implémentation de routage AngularJS native.

Si vous avez déjà utilisé l'interface utilisateur, vous savez peut-être comment définir les états enfants dans l'état parent à l'aide de la notation de points. Cependant, vous ne savez peut-être pas comment la bibliothèque d'interface utilisateur gère les vues nommées vues imbriquées dans l'état parent. C'est ce que je veux expliquer aujourd'hui.

Je vais vous montrer comment l'interface utilisateur utilise des noms absolus pour contrôler pleinement les parties spécifiques d'une application Web apparaissent. Cela vous permet d'ajouter et de supprimer facilement différentes pièces d'interface pour créer des applications modulaires composées de différents composants. Plus précisément, je vais vous montrer comment cartographier la barre de navigation, un contenu corporel et un pied de page à un état spécifique. Comme toujours, le code de ce tutoriel est disponible sur GitHub, et vous pouvez également trouver une démo à la fin de l'article.

débutant

Prenez un moment pour parcourir les fichiers qui composent cette démo (se trouve dans le lien github ci-dessus). Vous pouvez voir que nous avons un fichier index.html où nous avons une bibliothèque angularjs et ui-router. Dans ce fichier, nous avons deux directives de vue UI-View dans lesquelles nous insérerons notre contenu. Ensuite, nous avons un fichier app.js qui contiendra le code de notre application angulaire, ainsi qu'un répertoire de modèles. Ce répertoire sera utilisé pour accueillir toutes nos différentes vues. Bien que ce dossier ne soit pas nécessaire, il est absolument dans votre intérêt d'utiliser une certaine structure lors de la création de votre application en utilisant Angular. Comme vous pouvez le voir, j'inclus un dossier Assets à l'intérieur du dossier Modèles. C'est là que j'aime stocker des composants réutilisables: en-tête, barre de navigation, pied de page, etc. Je pense que vous pourriez trouver cette convention utile car elle rend votre code extrêmement modulaire.

ui-router

Ajouter des dépendances à Ui-Router

Commençons à configurer notre application. Dans notre fichier app.js, nous devons ajouter des dépendances sur l'interface utilisateur à notre module angulaire principal.

angular.module('app', ['ui.router'])

Configurez notre itinéraire

Une fois terminé, nous pouvons continuer à configurer l'objet de configuration de l'application. Ici, nous traiterons avec $stateProvider et $urlRouterProvider, nous devons donc les injecter dans nos objets de configuration pour les utiliser.

Ensuite, nous voulons passer l'URL de l'état de la page d'accueil à $urlRouterProvider.otherwise() afin qu'il cartaque notre application à cet état par défaut. Ensuite, nous devrons utiliser $stateProvider, ce qui sera ce à quoi nous traiterons dans le reste de ce tutoriel. $stateProvider est un outil fourni par l'interface utilisateur pour que les développeurs puissent utiliser lors de la réaction des applications. L'état correspond à la "position" des aspects d'interface utilisateur et de navigation globaux dans l'application. L'état décrit l'interface utilisateur à cet endroit et sa fonctionnalité. Il fonctionne de la même manière que Ngoute utilise RouteProvider.

Ce qui suit est à quoi devrait ressembler le fichier app.js pour le moment. Après avoir configuré l'URLrouterProvider, nous utilisons $stateProvider pour définir différents états de l'application. Dans cet exemple, nous définissons un état appelé à la maison et configurons uniquement l'URL.

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
      .state('home', {
        url: '/'
      });
    }
  ]);

vues objet

Maintenant que vous avez configuré le cadre de base, vous devez définir un objet $stateProvider dans views. Il devrait suivre l'URL dans l'État d'origine. Dans cet objet, nous définirons les noms des vues et de leurs chemins de modèle. Ici, vous pouvez également définir des choses comme les contrôleurs;

Ensuite, nous devons d'abord créer une vue anonyme qui pointera vers l'état parent - dans ce cas à la maison. Le templateUrl de cette vue sans nom liera fondamentalement les deux. C'est ce qu'on appelle la dénomination relative et indique à Angular d'insérer cette vue sans nom dans <div ui-view=""> dans notre fichier index.html. Votre code devrait désormais copier l'application.js ci-dessous. <pre class='brush:php;toolbar:false;'>angular.module('app', ['ui.router'])</pre> <p> Comme vous pouvez le voir, la vue sans nom résout à main.html, qui devrait être similaire au code ci-dessous. </p> <pre class='brush:php;toolbar:false;'>angular.module('app', ['ui.router']) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/' }); } ]);</pre> Le fichier main.html contient trois vues nommées - naval, corps et pied de page. Pour que ces composants apparaissent dans l'État d'origine, nous devons les définir avec une dénomination absolue. Plus précisément, nous devons utiliser la syntaxe <p> pour dire aux applications angularjs que ces composants doivent être mappés à un état spécifique. Cela suit la syntaxe ViewName @ Statename et indique à notre application d'utiliser des vues nommées depuis <code>@ Absolute ou un état spécifique. Vous pouvez en savoir plus sur les noms relatifs par rapport aux noms absolus ici.

Vous verrez que

est utilisé dans notre objet de configuration pour vous assurer qu'Angular sait que notre vue nommée pointe vers notre état d'origine. Si ces noms absolus n'existent pas, l'application ne saura pas où trouver ces vues nommées. Autrement dit, vérifiez ci-dessous et voyez comment l'application doit être acheminée. @home

angular.module('app', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');
      $stateProvider
        .state('home', {
          url: '/',
          views: {
            '': { 
              templateUrl: './templates/main.html' 
            },
          }
        });
     }
   ]);

(La démonstration du codep doit être insérée ici)

Pourquoi c'est génial

Comme je l'ai déjà dit, la dénomination absolue rend votre code extrêmement modulaire. Dans ce tutoriel, je mets toutes nos vues dans le dossier des modèles. Cependant, vous pouvez aller plus loin et créer des dossiers pour différentes vues de votre application. Cela vous permet de réutiliser des modèles tout au long de l'application ainsi que dans les futurs projets! La bibliothèque UI-Router facilite l'utilisation de différents composants d'une application Web, comme l'en-tête et le pied de page d'une vue spécifique. Cela facilitera le code de réutilisation dans différents projets et vous fera certainement gagner du temps.

Conclusion

Vous pouvez utiliser des noms absolus pour une nidification plus complexe et de niveau supérieur - ce n'est qu'un exemple! Néanmoins, j'espère que vous avez une compréhension plus approfondie de certaines des choses que l'interface utilisateur peut réaliser. Dans cet article d'Antonio Morales, il explique la différence entre la dénomination absolue et la dénomination relative, le sous-état et d'autres aspects de la bibliothèque Ui-Router d'Angular. Comme toujours, faites-moi savoir si vous avez des questions sur ce tutoriel. J'adorerais y répondre.

FAQs sur l'écriture de code modulaire à l'aide du routeur d'interface utilisateur angulaire et des vues nommées

Qu'est-ce que le routeur UI angulaire et en quoi est-il différent du routeur angulaire standard?

Le routeur UI angulaire est un cadre de routage flexible pour AngularJS qui fournit des caractéristiques non trouvées dans le routeur angulaire standard. Il permet des vues imbriquées et plusieurs vues nommées, tandis que le routeur angulaire standard ne prend en charge qu'une seule vue par URL. Cela fait du routeur d'interface utilisateur angulaire un outil puissant pour construire des applications à grande échelle complexes.

Comment configurer un routeur d'interface utilisateur angulaire dans mon projet?

Pour configurer le routeur d'interface utilisateur angulaire, vous devez d'abord inclure le script de routeur UI angulaire dans le fichier HTML. Ensuite, vous devez ajouter "ui.router" en tant que dépendance du module dans votre application AngularJS. Après cela, vous pouvez configurer votre statut à l'aide de $stateProvider et définir l'état par défaut à l'aide de $urlRouterProvider.

Quelles sont les vues nommées dans le routeur UI angulaire et comment les utilisez-vous?

La vue de nom est une caractéristique du routeur d'interface utilisateur angulaire qui vous permet d'attribuer un nom à une vue. Cela vous permet d'avoir plusieurs vues par URL, ce qui est très utile dans des applications complexes. Pour utiliser une vue nommée, vous devez inclure la directive "UI-View" dans le fichier HTML et lui attribuer un nom. Vous pouvez ensuite référencer ce nom dans la configuration de l'état.

Comment naviguer entre les états du routeur d'interface utilisateur angulaire?

Vous pouvez utiliser la méthode $state.go() pour naviguer entre les états du routeur UI angulaire. Cette méthode prend le nom de l'état en tant que paramètre et prend éventuellement l'objet de paramètre de l'état en tant que paramètre. Vous pouvez également utiliser la directive UI-SREF dans un fichier HTML pour créer des liens vers des états.

Comment transmettre des paramètres aux états du routeur UI angulaire?

Vous pouvez transmettre des paramètres aux états du routeur d'interface utilisateur angulaire en les incluant dans la configuration de l'état. Vous pouvez ensuite accéder à ces paramètres dans le contrôleur à l'aide du service $stateParams.

Comment gérer les changements d'état dans le routeur d'interface utilisateur angulaire?

Vous pouvez utiliser les événements $stateChangeStart et $stateChangeSuccess pour gérer les changements d'état dans le routeur d'interface utilisateur angulaire. Ces événements sont diffusés sur $rootScope et peuvent être écoutés dans votre contrôleur.

Comment analyser les données avant d'activer l'état dans le routeur d'interface utilisateur angulaire?

Vous pouvez analyser les données avant d'activer l'état dans le routeur d'interface utilisateur angulaire à l'aide de la propriété resolve dans la configuration d'état. Cette propriété est un objet qui définit les dépendances qui doivent être analysées avant l'activation de l'état.

Comment gérer les erreurs dans le routeur d'interface utilisateur angulaire?

Vous pouvez utiliser l'événement $stateChangeError pour gérer les erreurs dans le routeur UI angulaire. Cet événement est diffusé sur $rootScope et peut être écouté dans votre contrôleur.

Comment utiliser des vues imbriquées dans le routeur UI angulaire?

Vous pouvez utiliser des vues imbriquées dans le routeur d'interface utilisateur angulaire en incluant la directive "UI-View" dans le fichier HTML et en lui affectant un nom. Vous pouvez ensuite référencer ce nom dans la configuration de l'état.

Comment utiliser plusieurs vues nommées dans le routeur d'interface utilisateur angulaire?

Vous pouvez utiliser plusieurs vues nommées dans le routeur d'interface utilisateur angulaire en incluant la directive "UI-View" dans le fichier HTML et en lui affectant un nom différent. Vous pouvez ensuite référencer ces noms dans la configuration de l'état.