Angular stateParams
Nous allons introduire le service $stateParams et l’utiliser dans Angular.
Qu’est-ce que le service $stateParams dans Angular ?
$stateParams est un service qui capture les paramètres basés sur l’URL, et nous pouvons utiliser ces paramètres pour afficher des informations en fonction de l’état.
Créons un exemple avec deux états, comprenons comment fonctionnent les états et utilisons $stateparams pour stocker les paramètres.
Nous allons utiliser $stateProvider pour créer un état. L’état prend trois paramètres URL, templateUrl et controller.
Dans URL, nous ajoutons le lien de la page où l’état ira en utilisant state.go. Dans templateUrl, nous fournirons le nom ou l’URL du modèle pour cet état. Dans un contrôleur, nous fournirons le contrôleur pour l’état.
Créons deux états comme LoginState et SignUpState. Donc, notre code ressemblera à ci-dessous.
console.clear();
var app = angular.module('app', [
'ui.router'
]);
app.config(function($stateProvider) {
$stateProvider
.state('LoginState', {
url: '',
templateUrl: 'Firststate',
controller : function ($scope, $state, $stateParams) {
$scope.params = $stateParams;
$scope.go = function () {
$state.go('SignUpState', { id : '2nd Parameter' });
};
console.log('Firststate params:', $stateParams);
}
})
.state('SignUpState', {
url: 'SignUpState/:id',
templateUrl: 'SecondState',
controller : function ($scope, $state, $stateParams) {
$scope.params = $stateParams;
$scope.go = function () {
$state.go('LoginState', { someOtherParam : '1st Parameter' });
};
console.log('SecondState params:', $stateParams);
}
});
});
Créons maintenant un modèle pour ces modèles et incluons les fichiers de script Ui-router. Notre modèle affichera les paramètres enregistrés et disposera d’un bouton pour nous amener respectivement à SignUpState et LoginState.
<body ng-app="app">
<ui-view></ui-view>
<script type="text/ng-template" id="Firststate">
<h1>Login State</h1>
<h2>$stateParams: {{params}}</h2>
<p>(you can see it always empty)</p>
<button ng-click="go()">Sign Up</button>
</script>
<script type="text/ng-template" id="SecondState">
<h1>SignUp State</h1>
<h2>$stateParams: {{params}}</h2>
<button ng-click="go()">Login</button>
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.js"></script>
</body>
Production :
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn