Angular UI Router est un framework de routage pour angular js.
Angular JS fournit déjà le module ngRoute pour le routage. C’est une bibliothèque de routage de base où nous pouvons spécifier une seule vue et un contrôleur pour n’importe quelle route. Nous ne pouvons pas obtenir une vue imbriquée via ngRoute. Pour que nous utilisions un routeur d’interface utilisateur.
incluons la bibliothèque après avoir inclus Angular dans notre intex.le paquet de routeur d’interface utilisateur html
<script> src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js">
est distribué à l’aide de npm, le gestionnaire de paquets de nœuds.
npm install --save angular-ui-router
Ajouter une dépendance au routeur UI
Pour configurer l’application, nous devons ajouter une dépendance (ui.routeur) à notre module angulaire principal.
angular.module('myApp', )
Composants
Le routeur d’interface utilisateur a un ensemble de composants.
statstateProvider :
Un état correspond à une place dans l’application. l’état décrit via les propriétés du contrôleur, du modèle et de la vue.
Il déclenche des événements liés à la transition et des rappels. résoudre toutes les dépendances de l’état cible et mettre à jourlocationlocation pour refléter l’état actuel. État qui a des URL et il est automatiquement enregistré avecurlurlRouterProvider.
ui-sref: ui-sref est équivalent à href dans la balise d’ancrage.
ui-view : affiche les vues définies dans l’état actuel.
Configurez les états initiaux
Pour définir les états que nous pouvons utiliser.méthode de configuration dans cette méthode de configuration, nous pouvons définir un certain nombre d’états pour chacun de nos modaux.
.config(function($stateProvider,$urlRouterProvider){
$stateProvider
.state ('home',{
url:'/home',
templateUrl:'home.html'
})
})
Dans les lignes ci-dessus, nous avons créé un état nommé home. Lorsqu’un état est activé, le modèle est automatiquement inséré dans la vue de l’interface utilisateur.
Définir une directive ui-view
Le routeur UI utilise une directive appelée ui-view. ui-view détermine qu’un modèle d’état doit être chargé. nous inclurons la directive ui-view dans notre index.html
<!doctype html>
<html>
<head>
<title>UI Router for Angular JS</title>
<script src="angular.min.js"></script>
<script src="angular-ui-router.min.js"></script>
</head>
<body ng-app="myApp">
<ui-view></ui-view>
</body>
</html>
Template
Il existe différentes façons de définir le template pour un état spécifique.
modèle : une chaîne de contenu html ou une fonction qui renvoie html.
templateUrl : chaîne contenant le chemin d’url vers un modèle ou une fonction qui renvoie une chaîne de chemin d’url.
Contrôleurs
Nous pouvons affecter un contrôleur à un état. nous pouvons définir un contrôleur en utilisant function ou en utilisant le nom du contrôleur si vous avez déjà un contrôleur défini dans le module
en utilisant functions:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller: function($scope){
$scope.welcome="hello world";
}
})
utilisation du contrôleur:
$stateProvider
.state('home',{
url:'/home',
templateUrl:'home.html',
controller:'homeController'
})
État abstrait
Les états abstraits sont utilisés pour partager les informations communes à plusieurs états. Il a un état enfant et il ne peut pas être activé lui-même. Un état abstrait est activé l’un de ses états enfants est activé.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
Paramètres d’état
statLe service stateParams est un objet qui peut stocker les informations sur l’URL, si l’URL est assets/js/app.js. Nous pouvons passer n’importe lequel de ces paramètres d’URL dans l’objetstatstateParams et nous utilisons ces informations dans un autre état.
$stateProvider
.state('order',{
url:'/order/:orderid',
templateUrl:'order.html'
})
État imbriqué
État qui peut être imbriqué l’un dans l’autre, ce qui signifie que l’état enfant sera rendu dans la vue d’interface utilisateur avec l’état parent.
$stateProvider
.state('menu',{
url:'/menu',
templateUrl:'menu.html',
abstract:true
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Resolve
Resolve est l’option permettant de précharger les données d’une route.
$stateProvider
.state('user.profile',{
url:'/profile',
templateUrl:'profile.html',
controller:'profileController',
resolve: {
user: function($stateParams, userservice){
return userservice.find($stateParams.id);
},
tasks: function(TaskService, user){
return user.canHaveTasks()?TaskService.find(user.id):;
}
}
})
.state('menu.home',{
url:'/home',
templateUrl:'home.html',
controller:'homeCOntroller'
})
Dans le code ci-dessus, l’objet user chargera l’utilisateur puis l’objet task, mais uniquement si l’utilisateur peut avoir la tâche. La route ne se chargera que si toutes les résolutions réussissent. si la première résolution échoue, la seconde ne sera jamais essayée.