Concepto de estados de AngularJS

  2. HowTo
  3. Howtos de Angular
  4. Concepto de estados de AngularJS
Muhammad Adil 30 enero 2023
Angular AngularJS State
  1. el Concepto de States en AngularJS
  2. Inicializar un State en AngularJS
  3. Use el Proveedor de estado para proporcionar el estado para cualquier aplicación dada en AngularJS
  4. Diferencia entre $stateProvider y $routeProvider en AngularJS
  5. Ejemplo de AngularJS Estados
Concepto de estados de 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í.

Autor: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

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