Angular stateParams
Presentaremos el servicio $stateParams y lo usaremos en Angular.
¿Qué es el servicio $stateParams en Angular?
$stateParams es un servicio que captura parámetros basados en URL, y podemos usar estos parámetros para mostrar información según el estado.
Creemos un ejemplo con dos estados, comprendamos cómo funcionan los estados y usemos $stateparams para almacenar parámetros.
Usaremos $stateProvider para crear un estado. El estado toma tres parámetros URL, templateUrl, y controller.
En URL, añadimos el enlace de la página donde irá el estado usando state.go. En templateUrl, proporcionaremos el nombre o URL de la plantilla para ese estado. En un controlador, proporcionaremos el controlador para el estado.
Vamos a crear dos estados como LoginState y SignUpState. Así que nuestro código se verá como a continuación.
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);
}
});
});
Ahora vamos a crear una plantilla para estas plantillas e incluir los archivos de script Ui-router. Nuestra plantilla mostrará los parámetros guardados y tendrá un botón para llevarnos a SignUpState y LoginState, respectivamente.
<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>
Producción:
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