Concept of AngularJS States

  2. HowTo
  3. Angular Howtos
  4. Concept of AngularJS States
Muhammad Adil Feb 15, 2022
Angular AngularJS State
  1. the Concept of States in AngularJS
  2. Initialize a State in AngularJS
  3. Use the Stateprovider to Provide the State for Any Given Application in AngularJS
  4. Difference Between $stateProvider and $routeProvider in AngularJS
  5. Example of AngularJS States
Concept of AngularJS States

This article will explore the concept of State in AngularJS and how to use it to build a simple application.

the Concept of States in AngularJS

The STATE in AngularJS is a mechanism that allows us to update the view based on changes to the model. It is a two-way binding between data and DOM elements.

Moreover, the State helps us keep track of data that changes over time, such as whether a particular button has been pressed or not.

Initialize a State in AngularJS

Configuring a STATE in AngularJS is relatively easy. Use the State() method of the $stateProvider service to configure a state.

The arguments stateName and stateConfig are used in this procedure. stateName is a one-of-a-kind name for a state, and it may be something like /home, /aboutus, /Contactus, and so on.

The stateConfig is a state setup object having properties like templates, templateURL, and ResolveURL.

Use the Stateprovider to Provide the State for Any Given Application in AngularJS

The $stateProvider is a module used in AngularJS to provide the State for any given application.

You don’t have to use a direct link to a route to provide the State with a name, a different controller, or a different perspective.

More or less, it behaves the same as the $routeProvider, but instead of URLs, it focuses solely on State. We can take advantage of various features provided by UI-Route.

Moreover, you can have numerous ui-views on a single page. Various views can be nested and maintained by establishing State in the routing step.

Click here to learn more about Angular State provider.

Difference Between $stateProvider and $routeProvider in AngularJS

$stateProvider $routeProvider
It makes use of the ui-router third-party module to augment and expand routing features. It makes use of the ngRoute AngularJS module.
It renders the $stateProvider.state() It renders the $routeProvider.when()
ui-router creates routing depending on the application’s current state. ngRoute uses the route URL to perform routing.
ui-router makes use of $state.go() ng-router makes use of $location.path()
To move from one page or section to another: $state.go('Services'); To move from one page or section to another: $location.path('Services');

Example of AngularJS States

To clearly understand the concept of states, let’s discuss an example.

Our first step is to define the $stateProvider.

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

After that, let’s write the complete JavaScript and 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>

To check the complete working code mentioned above, click here.

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