Función state.go de Angular
El estado es un concepto muy importante para crear aplicaciones web y es una de las características principales de AngularJS. El marco AngularJS ayuda a los desarrolladores a administrar el estado a través del enlace de datos bidireccional y el manejo de eventos.
Este artículo discutirá la función Angular state.go.
¿Qué es UI-Router en Angular?
UI-Router proporciona enrutamiento y navegación para aplicaciones de una sola página.
Es un proyecto de código abierto creado para abordar las limitaciones del servicio $route de AngularJS, que se usaba para el manejo y la navegación de URL antes de presentar el nuevo módulo de enrutador de Angular.
Podemos usar UI-Router para desarrollar funciones que no están disponibles en el integrado, como enrutamiento, navegación, enlaces profundos, etc.
Las propiedades de anidamiento y vista no están disponibles en ngRoute. Le permite estructurar la interfaz de representación de la interfaz de usuario utilizando direcciones URL basadas en el estado.
También permite el uso de muchas vistas en la misma página, mejorando la utilidad de una vista. UI-Router es una herramienta fantástica para administrar aplicaciones web dinámicas.
¿Qué es la función $state.go de UI-Router en Angular?
Angular tiene muchas formas de pasar datos de un estado al siguiente. Por ejemplo, podemos usar un atributo HTML personalizado llamado ng-model, y también podemos usar un evento personalizado llamado ng-click.
Pero $state.go es probablemente la mejor manera de pasar un objeto de un estado al siguiente porque es menos detallado y más fácil para otras personas que quieran trabajar en diferentes proyectos de Angular en el futuro.
La sintaxis de $state.go se proporciona a continuación.
$state.go('destination.state');
Diferencia entre $state.go y $location.path en Angular
El $state.go es una directiva de AngularJS que le dice a la vista que actualice su URL para reflejar el estado actual de la aplicación. Esta directiva se usa para cambiar la URL sin salir de la página actual.
El $ubicación.ruta es una directiva de AngularJS que le dice a la vista que actualice su URL para reflejar la ubicación actual de la aplicación. Esta directiva se usa para salir de una página en particular cambiando su URL.
Para los nuevos desarrolladores de Angular, puede ser difícil entender por qué utilizamos ambos en diferentes situaciones cuando el objetivo es el mismo.
Puede administrar objetos de ubicación con el servicio $location, y el módulo UI-router incluye el servicio $state, que ayuda a administrar las rutas de manera compleja. Solo use el servicio $state para administrar estados y rutas usando ui-router.
Analicemos el ejemplo de $state.go para entenderlo mejor.
Código TypeScript:
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");
})
}
}]);
Código 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>
Haga clic aquí para ver la demostración en vivo del código.
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