HOWTO · Angular
Concept of AngularJS States
The STATE is a mechanism that allows us to update the view based on changes to the model in AngularJS.
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.
