Fonction Angular state.go
L’état est un concept très important pour la création d’applications Web, et c’est l’une des fonctionnalités essentielles d’AngularJS. Le framework AngularJS aide les développeurs à gérer l’état via la liaison de données bidirectionnelle et la gestion des événements.
Cet article traitera de la fonction Angular state.go.
Qu’est-ce que UI-Router dans Angular
UI-Router fournit le routage et la navigation pour les applications d’une seule page.
Il s’agit d’un projet open-source créé pour répondre aux limitations du service $route d’AngularJS, qui était utilisé pour la gestion et la navigation des URL avant l’introduction du nouveau module de routage d’Angular.
Nous pouvons utiliser UI-Router pour développer des fonctionnalités non disponibles dans celui intégré comme le routage, la navigation, les liens profonds, etc.
L’imbrication et la vue des propriétés nommées ne sont pas disponibles dans ngRoute. Il vous permet de structurer l’interface de rendu de l’interface utilisateur à l’aide d’URL basées sur l’état.
Il permet également l’utilisation de plusieurs vues sur la même page, améliorant ainsi l’utilité d’une vue. UI-Router est un outil fantastique pour gérer des applications Web dynamiques.
Qu’est-ce que la fonction $state.go d’UI-Router dans Angular
Angular a de nombreuses façons de transmettre des données d’un état à l’autre. Par exemple, nous pouvons utiliser un attribut HTML personnalisé appelé ng-model, et nous pouvons également utiliser un événement personnalisé appelé ng-click.
Mais $state.go est probablement le meilleur moyen de passer un objet d’un état à l’autre, car il est moins verbeux et plus facile pour les autres personnes qui souhaitent travailler sur différents projets Angular à l’avenir.
La syntaxe de $state.go est donnée ci-dessous.
$state.go('destination.state');
Différence entre $state.go et $location.path dans Angular
Le $state.go est une directive AngularJS qui indique à la vue de mettre à jour son URL pour refléter l’état actuel de l’application. Cette directive est utilisée pour changer l’URL sans quitter la page actuelle.
Le $location.path est une directive AngularJS qui indique à la vue de mettre à jour son URL pour refléter l’emplacement actuel de l’application. Cette directive est utilisée pour quitter une page particulière en modifiant son URL.
Pour les nouveaux développeurs Angular, il peut être difficile de comprendre pourquoi nous utilisons les deux dans des situations différentes lorsque l’objectif est le même.
Vous pouvez gérer les objets de localisation avec le service $location, et le module UI-router inclut le service $state, qui permet de gérer les itinéraires de manière complexe. Utilisez uniquement le service $state pour gérer les états et les routes à l’aide de UI-router.
Discutons de l’exemple de $state.go pour mieux le comprendre.
Code dactylographié :
app = angular.module('myApp',['ui.router',])
app.config(['$stateProvider',function($stateProvider){
$stateProvider
.state('main',{
url: '/',
templateUrl:"main.html",
controller: 'Demo',
})
.state('Roll',{
url: '/Roll',
template:"<p> Saved</p>"
})
}]);
app.config(['$urlRouterProvider',function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}]);
app.controller('Demo', ['$scope', '$http', '$state'
,function($scope, $http, $state){
$scope.user = { RollNumber : "1234" }
$scope.save = function(){
$http.get("dummy.json", { params : $scope.user } )
.success(function(data){
$state.go("Roll");
})
}
}]);
Code HTML:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" data-semver="0.2.11" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script data-require="lodash.js@*" data-semver="2.4.1" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="app.js"></script>
</head>
<body>
<div ui-view=""></div>
</body>
</html>
Cliquez ici pour vérifier la démonstration en direct du code.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook