Concept des états AngularJS

  2. HowTo
  3. Howtos Angular
  4. Concept des états AngularJS
Muhammad Adil 30 janvier 2023
Angular AngularJS State
  1. Le concept des States dans AngularJS
  2. Initialiser un State dans AngularJS
  3. Utilisez le Stateprovider pour fournir l’état d’une application donnée dans AngularJS
  4. Différence entre $stateProvider et $routeProvider dans AngularJS
  5. Exemple d’“États” AngularJS
Concept des états AngularJS

Cet article explorera le concept de State dans AngularJS et comment l’utiliser pour créer une application simple.

Le concept des States dans AngularJS

Le STATE dans AngularJS est un mécanisme qui nous permet de mettre à jour la vue en fonction des modifications apportées au modèle. Il s’agit d’une liaison bidirectionnelle entre les données et les éléments DOM.

De plus, le State nous aide à garder une trace des données qui changent au fil du temps, comme si un bouton particulier a été appuyé ou non.

Initialiser un State dans AngularJS

Configurer un STATE dans AngularJS est relativement facile. Utilisez la méthode State() du service $stateProvider pour configurer un état.

Les arguments stateName et stateConfig sont utilisés dans cette procédure. stateName est un nom unique pour un état, et il peut être quelque chose comme /home, /aboutus, /Contactus, etc.

Le stateConfig est un objet de configuration d’état ayant des propriétés telles que templates, templateURL et ResolveURL.

Utilisez le Stateprovider pour fournir l’état d’une application donnée dans AngularJS

Le $stateProvider est un module utilisé dans AngularJS pour fournir l’état d’une application donnée.

Vous n’avez pas besoin d’utiliser un lien direct vers une route pour fournir à l’État un nom, un contrôleur différent ou une perspective différente.

Plus ou moins, il se comporte de la même manière que le $routeProvider,, mais au lieu des URLs, il se concentre uniquement sur State. Nous pouvons profiter de diverses fonctionnalités fournies par UI-Route.

De plus, vous pouvez avoir plusieurs ui-views sur une seule page. Diverses vues peuvent être imbriquées et maintenues en établissant State dans l’étape de routage.

Cliquez ici pour en savoir plus sur le fournisseur Angular State.

Différence entre $stateProvider et $routeProvider dans AngularJS

$stateProvider $routeProvider
Il utilise le module tiers ui-router pour augmenter et étendre les fonctionnalités de routage. Il utilise le module AngularJS ngRoute.
Il rend le $stateProvider.state() Il rend le $routeProvider.when()
ui-router crée un routage en fonction de l’état actuel de l’application. ngRoute utilise l’URL de la route pour effectuer le routage.
ui-router utilise $state.go() ng-router utilise $location.path()
Pour passer d’une page ou d’une section à une autre : $state.go('Services'); Pour passer d’une page ou d’une section à une autre : $location.path('Services');

Exemple d’“États” AngularJS

Pour bien comprendre le concept d’états, examinons un exemple.

Notre première étape consiste à définir le $stateProvider.

var app = angular.module('app', ['ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
     
$urlRouterProvider.otherwise("/index");
        $stateProvider

Après cela, écrivons le code JavaScript et HTML complet.

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>

Pour vérifier le code de travail complet mentionné ci-dessus, cliquez ici.

Auteur: 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