Premiers pas avec angular-ui-router

Hello World Exemple

ÉTAPE 1 : Installation

Avant de pouvoir utiliser Angular-UI Router, vous devez inclure AngularJS lui-même dans votre projet. Pour un guide détaillé à ce sujet, consultez cette [documentation][1].

Vous pouvez télécharger Angular-UI Router soit depuis leur [GitHub-Page][2] ou depuis NuGet, NPM, Bower respectivement.

Après avoir inclus le fichier JS dans votre page Web, vous pouvez injecter le module ui.router dans votre application. Dans votre fichier de script, vous devriez avoir quelque chose comme ceci :

var app = angular.module('app', []);

et maintenant nous allons injecter Angular-UI Router dans notre propre application comme ceci :

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

Maintenant, Angular-UI Router sera chargé avec notre application. Les étapes suivantes expliqueront les bases du routeur Angular-UI et montreront certaines des fonctionnalités de base.

ÉTAPE 2 : Définir des états simples

Vous pouvez configurer l’UI-Router dans la fonction “config” d’Angular. Utilisez le $stateProvider pour définir vos états. Dans l’exemple suivant, chaque état a une URL, un contrôleur et un modèle.

(function() {
  var app = angular.module('app', ['ui.router']);
  
  app.config(['$stateProvider', function($stateProvider) {
      $stateProvider
        .state('home', {
          url: "/home",
          templateUrl: "home.html",
          controller: "homeCtrl"
        })
        .state('kitchen', {
          url: "/kitchen",
          templateUrl: "kitchen.html",
          controller: "kitchenCtrl"
        })
        .state('den', {
          url: "/denCtrl",
          templateUrl: "den.html",
          controller: "denCtrl"
        })
        .state('itemDetail', {
          url: "/items/:itemName",
          templateUrl: "item.html",
          controller: "itemDetailCtrl"
        })

    }])
})();

dans votre HTML, vous aurez besoin de la directive ui-view pour que les vues d’état puissent être renseignées à l’intérieur.

<div ui-view></div>

ÉTAPE 3 : Accéder aux états

Il existe en tout 3 façons d’accéder à un état défini dans $stateProvider.

1. Via la directive ui-sref

Vous pouvez accéder aux états à l’intérieur de votre HTML, en utilisant la directive ui-sref

<li ui-sref-active="active">
    <a ui-sref="kitchen">Go to the Kitchen</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="den">Enter the den</a>
</li>
<li ui-sref-active="active">
    <a ui-sref="itemDetail({itemName:'keyboard'})">Key Board</a>
</li>

2. Via le service $state dans le contrôleur

vous pouvez également naviguer vers d’autres états à l’intérieur de votre contrôleur en utilisant le $state fourni au contrôleur avec la méthode .go.

.controller(function($scope, $state) {
    // ...
    $scope.navigateTo = function(stateName) {
        $state.go(stateName); // i.e. $state.go('den'); 
    };
})

3. Via l’url dans le navigateur

En supposant que vous ayez un état appelé “cuisine” défini comme ceci :

$stateProvider
  .state("kitchen", {
    url: "/kitchenUrl",
    ...
  });

Ensuite, accéder à appdomain/kitchenUrl en tant qu’URL dans votre navigateur ira à votre état “cuisine”, en supposant qu’il n’y a pas d’états imbriqués et que “appdomain” est le serveur qui héberge votre application.

Si vous êtes toujours confus, voici un [Plnkr][3] entièrement fonctionnel

[1] : https://www.wikiod.com/fr/angularjs/premiers-pas-avec-angularjs#Commencer [2] : https://github.com/angular-ui/ui-router [3] : http://plnkr.co/edit/y67KK9gZ5NdIMbMrBF6s?p=preview//

Vue de base

index.html

<html>
    <head>
        <title>Angular-UI Router Example</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
        <script type="text/javascript" src="../js/script.js"></script>
    </head>
    <body ui-view="mainView"> <!-- Defining a container for our view -->
    </body>
</html>

script.js

var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider', function($stateProvider){
    $stateProvider.state('home', {                        // Creating a state called 'home'
        url: '',                                          // An empty URL means that this state will be loaded on the main URL when no other state is called
        views: {
            'mainView': {                                 // Section for our view-container that we defined in the HTML
                template: '<h1>It works!</h1>'            // Setting a template for this view
                /*templateUrl: '../templates/home.html'*/ //templateUrl would load the file and uses it's content as the template
             }
        }
    });
}])

Définir un état avec plusieurs vues

Dans ui-router, un état peut contenir plusieurs vues, chacune avec son propre contrôleur et un modèle

.state('dashboard', {
     name: 'dashboard',
     url: '/dashboard',
     views: {
         "view1": {
             templateUrl: "path/to/view1.html",
             controller: "view1Controller"
         },
         "view2": {
             templateUrl: "path/to/view2.html",
             controller: "view2Controller"
         }
     }
 })

Ensuite, dans le code HTML de votre état, vous pouvez lier ces vues

<div ui-view="view1"></div>
<div ui-view="view2"></div>

Résoudre les données dans un état

Vous pouvez “résoudre” les données dans votre état lorsque vous y faites la transition, généralement c’est utile lorsque l’état doit utiliser ces données, ou pour se résoudre dans un état lorsque certaines entrées fournies doivent être authentifiées.

Lorsque vous définissez vos états, vous devrez fournir une carte des valeurs à résoudre dans la propriété .resolve, chaque valeur résolue doit avoir une fonction qui renvoie une promesse

.state('main', {
     url: "/main",
     templateUrl: "path/to/main.html",
     controller: 'mainCtrl',
     resolve: {
         serverData: function ($http) {
             return $http.get('some/url');
         }
     }
});

Maintenant, à l’intérieur de mainCtrl, vous pouvez accéder aux données (c’est-à-dire si l’appel $http a été résolu avec succès).

.controller("mainCtrl", function($scope, serverData) {
    $scope.resolvedData = serverData.then(resp=> resp.data);
    ....
})

Utiliser les événements de transition

UI-Router expose des événements de transition qui peuvent être utiles pour gérer les erreurs de transition, gérer/bloquer les transitions en fonction de certaines valeurs de paramètres, authentification personnalisée, etc.

Ces événements peuvent être liés à $rootScope pour un effet global ou à $scope pour un effet par contrôleur.

$stateChangeError - Cet événement est diffusé lorsqu’une tentative de changement d’état a échoué et a généré une erreur, cet événement déclenche une fonction de rappel avec la signature suivante :

rappel (événement, toState, toParams, fromState, fromParams, erreur)

événement : l’objet événement

toState : l’état cible

toParams : les paramètres passés à l’état cible

fromState : état actuel

fromParams : les paramètres passés à l’état actuel

error : l’objet d’erreur

$stateChangeStart - Cet événement est diffusé lorsqu’une transition d’état a commencé, cet événement déclenche une fonction de rappel avec la signature suivante :

rappel (événement, toState, toParams, fromState, fromParams, options)

options : l’objet d’options d’état

$stateChangeSuccess - Cet événement est diffusé lorsqu’une transition d’état se termine, cet événement déclenche une fonction de rappel avec la signature suivante :

rappel (événement, toState, toParams, fromState, fromParams, options)

$stateNotFound - Cet événement est diffusé lorsqu’un état vers lequel vous avez demandé la transition n’a pas été trouvé, cet événement déclenche une fonction de rappel avec la signature suivante :

rappel (événement, unfoundState, fromParams, fromState)

unfoundState - un objet représentant l’état qui n’a pas été trouvé

Exemple:

$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams, options) {
    $log.debug("$stateChangeSuccess: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, options: %o", event, toState, toParams, fromState, fromParams, options);
    // runs when the state has successfully changed
});

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, options) {
    $log.debug("$stateChangeStart: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, options: %o", event, toState, toParams, fromState, fromParams, options);
    // runs when the state has just started to transition
});

$rootScope.$on('$stateNotFound', function (event, unfoundState, fromParams, fromState) {
    $log.debug("$stateNotFound: event: %o unfoundState: %o, fromParams: %o, fromState: %o", event, unfoundState, fromParams, fromState);
    // runs when the state wsa not found
});

$rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
    $log.debug("$stateChangeError: event: %o toState: %o, toParams: %o, fromState: %o, fromParams: %o, error: %o", event, toState, toParams, fromState, fromParams, error);
    // runs when there was an error while attempting to transition
});
Types de paramètres personnalisés →