A state in an angularjs web application is like a web-page in multiple page traditional websites. In multipage websites user is redirected from one page to another but in single page angular web application state transtion occurs. This is called state based routing which helps application to change its view component without even reloading or redirecting the current webpage. Since user is never redirected to another page but all changes are brought in by the state transition in a single webpage only, it is also called a single web page application.
Also read, Angular web-application with ng-click AngularJS directive to create Like/Dislike Button
The
ui-router
is the module which must be included as a dependency for state based routing within a web application.
This main module conatains different sub modules which is automatically included in the application along with main module.
var routerApp = angular.module('routerApp', ['ui.router']); routerApp.config(function($stateProvider, $urlRouterProvider) { //HANDLE UNDEFINED STATE USING OTHERWISE METHOD $urlRouterProvider.otherwise('/home'); $stateProvider // HOME STATES .state('home', { url: '/home', templateUrl: 'partial-home.html' }) .state('about', { url: '/about', templateUrl: 'partial-about.html' }) .state('contact-us', { url: '/contact-us', templateUrl: 'contact-us.html' }) .state('products.g3', { url: '/motorola-g3', views: { '': { templateUrl: 'motorola-g3.html'}, 'columnThree@products':{ templateUrl: 'motorola-g3.html', controller: 'mobilesController' } } }) .state('products.g4', { url: '/motorola-g4', views: { '': { templateUrl: 'motorola-g4.html'}, 'columnThree@products':{ templateUrl: 'motorola-g4.html', controller: 'mobilesController' } } }) .state('products.e4', { url: '/motorola-e4', views: { '': { templateUrl: 'motorola-e4.html'}, 'columnThree@products':{ templateUrl: 'motorola-e4.html', controller: 'mobilesController' } } }) // PRODUCTS PAGE AND NESTED VIEWS .state('products', { url: '/products', views: { '': { templateUrl: 'products.html' }, 'columnTwo@products': { template: 'Click on the model to view the mobile.' }, 'columnOne@products': { templateUrl: 'table-data.html', controller: 'mobilesController' } } }); });
ui-router
contains different directives, but here we will discuss only the two which is needed to build a basic single page application
with state based routing.
- ui-sref
- ui-view
The
ui-sref
directive maps the href link(<a> tag) to an application state. It is defined using ui-sref="string"
,
where string is the application state. The directive will automatically generate & update the href attribute via the $state.href()
method.
Clicking the link will trigger a state routing within the aplication. Here $state
is a service provided by the ui-router
,
responsible for representing states as well as transitioning between them.
<li ui-sref-active="active"><a ui-sref="home">Home</a></li> <li ui-sref-active="active"><a ui-sref="about">About Us</a></li> <li ui-sref-active="active"><a ui-sref="products">Products</a></li> <li ui-sref-active="active"><a ui-sref="contact-us">Contact Us</a></li>
ui-sref-active
another directive working along with ui-sref which adds classes to a link element when certain link is active and removes it
when inavtive.
A
ui-view
is a viewport component provided by ui-router.
When a state is activated, its corresponding template is rendered into the appropriate viewport.
So, basically every link within an angular application is associated with a state and for every state there is a view component.
Clicking on the link will activate the state transition which in turn will bring the appropriate view component into the application window.
<div class="container">
<div ui-view></div>
</div>
Also read, Build single page web application in AngularJS with state bases routing
Want to see a demo?
Published on Jan 15, 2021