Konzept der AngularJS-Zustände

  2. How-To's
  3. Angular Howtos
  4. Konzept der AngularJS-Zustände
Muhammad Adil 30 Januar 2023
Angular AngularJS State
  1. das Konzept der States in AngularJS
  2. Initialisieren Sie einen State in AngularJS
  3. Verwenden Sie den Stateprovider, um den Status für eine beliebige Anwendung in AngularJS bereitzustellen
  4. Unterschied zwischen $stateProvider und $routeProvider in AngularJS
  5. Beispiel für AngularJS States
Konzept der AngularJS-Zustände

Dieser Artikel untersucht das Konzept von State in AngularJS und wie man damit eine einfache Anwendung erstellt.

das Konzept der States in AngularJS

Der STATE in AngularJS ist ein Mechanismus, der es uns ermöglicht, die Ansicht basierend auf Änderungen am Modell zu aktualisieren. Es ist eine bidirektionale Bindung zwischen Daten und DOM-Elementen.

Darüber hinaus hilft uns der Statte, Daten zu verfolgen, die sich im Laufe der Zeit ändern, z. B. ob eine bestimmte Schaltfläche gedrückt wurde oder nicht.

Initialisieren Sie einen State in AngularJS

Die Konfiguration eines STATE in AngularJS ist relativ einfach. Verwenden Sie die Methode State() des Dienstes $stateProvider, um einen Zustand zu konfigurieren.

In diesem Verfahren werden die Argumente stateName und stateConfig verwendet. stateName ist ein eindeutiger Name für einen Staat und kann so etwas wie /home, /aboutus, /Contactus und so weiter sein.

stateConfig ist ein Status-Setup-Objekt mit Eigenschaften wie templates, templateURL und ResolveURL.

Verwenden Sie den Stateprovider, um den Status für eine beliebige Anwendung in AngularJS bereitzustellen

Der $stateProvider ist ein Modul, das in AngularJS verwendet wird, um den Zustand für eine bestimmte Anwendung bereitzustellen.

Sie müssen keinen direkten Link zu einer Route verwenden, um dem Staat einen Namen, einen anderen Controller oder eine andere Perspektive zu geben.

Er verhält sich mehr oder weniger genauso wie der $routeProvider,, konzentriert sich aber statt auf URLs nur auf State. Wir können verschiedene Funktionen von UI-Route nutzen.

Außerdem können Sie auf einer einzigen Seite zahlreiche ui-views haben. Verschiedene Ansichten können verschachtelt und verwaltet werden, indem der Zustand im Routing-Schritt festgelegt wird.

Klicken Sie hier, um mehr über den Anbieter von Angular State zu erfahren.

Unterschied zwischen $stateProvider und $routeProvider in AngularJS

$stateProvider $routeProvider
Es nutzt das Drittanbietermodul ui-router, um die Routing-Funktionen zu erweitern und zu erweitern. Es nutzt das Modul ngRoute AngularJS.
Es rendert den $stateProvider.state() Es rendert die $routeProvider.when()
ui-router erstellt Routing in Abhängigkeit vom aktuellen Zustand der Anwendung. ngRoute verwendet die Routen-URL, um das Routing durchzuführen.
ui-router verwendet $state.go() ng-router verwendet $location.path()
Um von einer Seite oder einem Abschnitt zu einer anderen zu wechseln: $state.go('Services'); Um von einer Seite oder einem Abschnitt zu einer anderen zu wechseln: $location.path('Services');

Beispiel für AngularJS States

Lassen Sie uns ein Beispiel diskutieren, um das Konzept der Zustände klar zu verstehen.

Unser erster Schritt ist die Definition des $stateProvider.

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

Danach schreiben wir den vollständigen JavaScript- und HTML-Code.

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>

Um den oben erwähnten vollständigen Arbeitscode zu überprüfen, hier klicken.

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