HOWTO · Angular
Concepto de estados de AngularJS
El ESTADO es un mecanismo que nos permite actualizar la vista en función de los cambios en el modelo en AngularJS.
Este artículo explorará el concepto de State en AngularJS y cómo usarlo para construir una aplicación simple.
el Concepto de States en AngularJS
El STATE en AngularJS es un mecanismo que nos permite actualizar la vista en función de los cambios en el modelo. Es un enlace bidireccional entre datos y elementos DOM.
Además, el State nos ayuda a realizar un seguimiento de los datos que cambian con el tiempo, como si se presionó o no un botón en particular.
Inicializar un State en AngularJS
Configurar un STATE en AngularJS es relativamente fácil. Utilice el método State() del servicio $stateProvider para configurar un estado.
Los argumentos stateName y stateConfig se utilizan en este procedimiento. stateName es un nombre único para un estado, y puede ser algo como /home, /aboutus, /Contactus, etc.
El stateConfig es un objeto de configuración de estado que tiene propiedades como templates, templateURL y ResolveURL.
Use el Proveedor de estado para proporcionar el estado para cualquier aplicación dada en AngularJS
El $stateProvider es un módulo utilizado en AngularJS para proporcionar el Estado para cualquier aplicación dada.
No es necesario utilizar un enlace directo a una ruta para proporcionar al estado un nombre, un controlador diferente o una perspectiva diferente.
Más o menos, se comporta igual que el $routeProvider,, pero en lugar de URLs, se centra únicamente en el Estado. Podemos aprovechar varias funciones proporcionadas por UI-Route.
Además, puede tener numerosas vistas de interfaz de usuario en una sola página. Se pueden anidar y mantener varias vistas estableciendo State en el paso de enrutamiento.
Haga clic aquí para obtener más información sobre el proveedor de estado angular.
Diferencia entre $stateProvider y $routeProvider en AngularJS
$stateProvider |
$routeProvider |
|---|---|
Hace uso del módulo de terceros ui-router para aumentar y expandir las funciones de enrutamiento. |
Hace uso del módulo ngRoute AngularJS. |
Representa el $stateProvider.state() |
Representa el $routeProvider.when() |
ui-router crea enrutamiento dependiendo del estado actual de la aplicación. |
ngRoute utiliza la URL de la ruta para realizar el enrutamiento. |
ui-router hace uso de $state.go() |
ng-router hace uso de $location.path() |
Para pasar de una página o sección a otra: $state.go('Services'); |
Para pasar de una página o sección a otra: $location.path('Services'); |
Ejemplo de AngularJS Estados
Para entender claramente el concepto de estados, analicemos un ejemplo.
Nuestro primer paso es definir el $stateProvider.
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/index");
$stateProvider
Después de eso, escribamos el código JavaScript y HTML completo.
var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/index");
$stateProvider
// index
.state('index', {
url: "/index",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"home.html"
},
'left-view@index' :{
templateUrl:"entries.html"
},
'status-view': {
template:"<p>index<p>"
},
},
})
.state('entries', {
url: "/entries",
views: {
'menu-view': {
templateUrl:"menu.html"
},
'container-view': {
templateUrl:"entries.html"
},
'status-view': {
template:"<p>entries<p>"
},
},
})
.state('entries.add', {
url: "/add",
views: {
'bottom-view@entries': {
templateUrl:"entries.add.html"
},
'status-view@': {
template:"<p>entries.add<p>"
},
},
})
.state('entries.list', {
url: "/list",
views: {
'bottom-view@entries': {
templateUrl:"entries.list.html"
},
'status-view@': {
template:"<p>entries.list<p>"
},
},
})
});
<html>
<head>
<meta charset="utf-8">
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<div class="container">
<div class="row">
<div ui-view="menu-view" class="col-md-2"></div>
<div ui-view="container-view" class="col-md-10"></div>
</div>
<div class="pull-right">
<div style="width: auto; float:left; margin-right:10px">status:</div>
<strong style="width: auto; float:left;" ui-view="status-view"> </strong>
</div>
</div>
<script id="menu.html" type="text/ng-template">
<div class="alert alert-info">
<h3><a ui-sref="index">Home</a></h3>
<h3><a ui-sref="entries">Entries</a></h3>
</div>
</script>
<!-- home -->
<script id="home.html" type="text/ng-template">
<h4>Home</h4>
<div ui-view="left-view" class="col-md-7">
</script>
<script id="entries.html" type="text/ng-template">
<div class="alert alert-warning">
<strong>Entries</strong>
<h5><a ui-sref="entries.add">add new</a></h5>
<h5><a ui-sref="entries.list">view list</a></h5>
<div style="background:white">
<div ui-view="bottom-view"></div>
</div>
</div>
</script>
<script id="entries.add.html" type="text/ng-template">
Create new Entry <input type=text/>
</script>
<script id="entries.list.html" type="text/ng-template">
<ol>
<li>First Entry</li>
<li>Second Entry</li>
<li>Third Entry</li>
</ol>
</script>
<script id="arrivals.html" type="text/ng-template">
<div class="alert alert-success">
<div style="background:white">
<div ui-view="bottom-view"></div>
</div>
</div>
</body>
</html>
Para verificar el código de trabajo completo mencionado anteriormente, haga clic aquí.
