UI-Sref dans AngularJS

1. Qu’est-ce qu’un UI-Router Angular et comment ça marche
2. Différence entre Ng-Route et UI-Router (state) dans Angular
3. Navigation d’un état à l’autre de ui-sref dans Angular
4. Implémentation et Installation de UI-Router en Angular
5. Créer des composants et un routeur d’application pour comprendre l’utilisation de ui-sref dans Angular

La directive ngHref d’Angular nous permet de lier des paramètres à des URL. Nous pouvons nous lier aux états en utilisant ui-sref, fourni par UI-Router.

Ce n’est pas la même chose que de se rapporter à une URL normale. C’est finalement un scénario différent de la façon de lier un état.

Cet article approfondira le sujet principal et expliquera comment utiliser ui-Sref dans Angular à l’aide de UI-Router.

Qu’est-ce qu’un UI-Router Angular et comment ça marche

Angular UI-Router est un module qui nous aide à créer des applications d’une seule page. Il fournit une abstraction entre l’application et le navigateur en gérant toutes les routes de notre application.

Cela permet également d’apporter des modifications à notre application de manière plus efficace. Par exemple, lorsque nous voulons ajouter une nouvelle route, nous pouvons le faire avec une seule ligne de code.

Il adopte une approche différente de ng-Route en ce sens qu’il modifie les vues de votre application en fonction de l’état de l’application plutôt que simplement de l’URL de la route. Sur ng-Route, UI-Router est la meilleure option car il possède deux fonctionnalités clés : les vues imbriquées et les vues multiples.

Cette technique ne lie pas les pages et les routes à l’URL du navigateur comme ng-Route. Cliquez ici pour en savoir plus sur ui-router.

Cela aiderait si vous aviez une idée des vues imbriquées et des vues multiples.

1. Les vues imbriquées sont similaires aux relations parent-enfant car elles contiennent une vue à l’intérieur d’une autre. D’une autre manière, avoir une liste de smartphones en un seul endroit.

   Lorsque vous cliquez sur un smartphone, vous voyez ses attributs sous un angle différent.

2. Plusieurs vues sont définies comme ayant plus d’une vue sur la même page. De nombreuses sections sont généralement liées à une page spécifique dans n’importe quelle application ; par exemple, nous affichons plusieurs éléments d’une application sur la page principale.

   Pour avoir chacun de ces composants, nous devrons créer une vue distincte pour chacun d’eux.

Différence entre Ng-Route et UI-Router (state) dans Angular

Chaque développeur doit connaître la différence fondamentale entre ng-route et ui-router.

Ng-Route existe depuis plus longtemps que UI-Router, et les concepts sont plus familiers aux développeurs qui viennent d’autres frameworks comme React.

Ng-Route fournit également des fonctionnalités que UI-Router ne fournit pas, telles que les routes de chargement imbriquées et paresseuses.

UI-Router (state) est une bibliothèque utilisée pour gérer le routage des composants de l’interface utilisateur. C’est un choix populaire pour les développeurs Angular.

De plus, UI-Router (état) a une syntaxe plus propre et il est plus facile de créer des vues imbriquées dans ce cadre, mais il ne fournit pas de routes de chargement paresseux comme le fait Ng-Route.

Navigation d’un état à l’autre de ui-sref dans Angular

La directive ui-sref est la première option pour naviguer d’un état à un autre. La propriété href de l’élément d’ancrage HTML vous est probablement familière ; de même, la directive ui-sref fait référence à une référence d’état.

Déclarer un nom d’état avec la directive ui-sref attachée à une ancre est la façon dont vous utilisez la directive. Discutons d’un exemple pour mieux le comprendre.

<a ui-sref="Contact Form" href="#Contact">Contact Us</a>

L’utilisation d’une méthode de l’objet $state, disponible pour un contrôleur Angular, est la technique suivante pour naviguer entre les états. Par example.

angular.module('app').controller('PageController',
            ['$scope', '$state',
    function ($scope,   $state) {
        $scope.navigate = function () {
            $state.go('Contact');
        };
    }]);

Implémentation et Installation de UI-Router en Angular

Tout d’abord, vous devez installer Angular UI-router à l’aide du gestionnaire de packages npm dans le terminal de commande.

$ npm install angular --save // AngularJS

$ npm install angular-ui-router --save // angular UI-router

Après avoir ajouté le ui-router, il est temps de travailler sur le fichier index.html.

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
  <body ng-app="Example">
      <div ui-view="header"></div>
      <div ui-view=""></div>
      <div ui-view="footer"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
      <script src="app/app.routes.js"></script>
  </body>
</html>

Créer des composants et un routeur d’application pour comprendre l’utilisation de ui-sref dans Angular

Les composants sont des objets isolés réutilisables qui peuvent être réutilisés. C’est la même chose qu’une commande.

La principale distinction est qu’il s’agit toujours d’une portée limitée au lieu d’une directive où vous pouvez choisir si elle est isolée ou non.

Ici, nous n’avons créé qu’un composant header ; nous n’avons créé aucun autre composant pour les composants home, about us, et contact us car notre objectif principal est de vous apprendre l’utilisation de ui-sref.

<nav class="navbar-default">
  <div class="Box">
    <div class="header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
        <div class="icon-bar"></div>
      </button>

    </div>
    <div class="new-class" id="112211">
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
		<li><a ui-sref="about">About us</a></li>
		<li><a ui-sref="contact">contact us</a></li>
      </ul>
    </div>
  </div>
</nav>

C’est ainsi que nous avons utilisé ui-sref. Le ui-sref est utilisé ici pour router les pages.

Il est maintenant temps d’écrire le code final de l’application.

var app = angular.module('Example', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {

// create default view
$urlRouterProvider.otherwise("/home");


$stateProvider
// home states and nested view
.state('home', {
	url: "/home",
	template: '<div <p> Home Tab is active!!!</p></div>'
})
// about states and nested view
.state('about', {
	url: "/about",
		template: '<div <p> About Us Tab is active!!!</p></div>'
})
.state('contact', {
	url: "/contact",
		template: '<div <p> Contact Us Tab is active!!!</p></div>'
});
});

Cliquez ici pour vérifier la démonstration en direct du code.