Routing in Angular JS using Angular UI Router

19 Feb, 2019
AngularJS is a front-end web application framework based on JavaScript and is maintained by Google. AngularJS interprets the attributes of HTML as directives to bind input/output components to a model represented by standard JavaScript variables.
Pre-requisites:
HTML
CSS
JavaScript
AngularJS
Angular-UI-Router is an AngularJS module used to create routes for AngularJS applications. Routes are an important part of Single-Page-Applications (SPAs) as well as regular applications and Angular-UI-Router provides easy creation and usage of routes in AngularJS.
Angular-UI-Router has stateProvider method which is used to create routes/states in application. State Provider takes state name and state configurations as parameters.
Syntax:
$stateProvider
.state('StateName', {
    url: 'Url pattern for this State',
    template: "Html content",
    controller: "Name of the Controller for this state"
});

Instead of template, templateUrl can be used and given the path of the HTML file to render for the state.Example:
$stateProvider
.state('Home', {
    url: '/home',
    templateUrl: "home.html",
    controller: "HomeCtrl"
});

Simple project to navigate between the routes to demonstrate the use of the Angular-UI-Router module.Pre-requisites: Node.js and npm
To run and install http-server node module to host demo app.
Steps to perform the operation:1. Create a directory structure as below:
routingDemo
--app.js
--index.html
--nav.html

2. Create nav.html file as below. This file consist of nav bar title and contents of it.
3. Create index.html file as below. All the required dependencies are included in this file along with nav.html file and definition of ui-view where content of different routes will be rendered.
Explanation:
All the dependencies are included via CDN in the head tag.
nav.html file is included to the index.html page in the body tag
The last division in body defines ui-view div where the content of different routes will be rendered.
Note:If it does not work, replace the second and third script with below:
<script src="angular.min.js"></script>
<script src = "
https://unpkg.com/@uirouter/angularjs@1.0.7/release/angular-ui-router.min.js">
</script>

4. Create app.js file as below. This is the application file with routes information and actions to be performed through controller.
// declares application module with name "myApp"// inject ui.router dependencyvar app = angular.module('myApp', [ "ui.router" ]);  // define route configurations inside app.config// injecting dependenciesapp.config(function($stateProvider, $locationProvider,                                 $urlRouterProvider) {      // creating routes or states    $stateProvider        .state('Home', {            url : '/home',            template : "<h1>Home Page</h1>",            controller : "HomeCtrl"        })        .state('Login', {            url : '/login',            template : "<h1>Login Page</h1>",            controller : "LoginCtrl"        })        .state('Signup', {            url : '/signup',            template : "<h1>Signup Page</h1>",            controller : "SignupCtrl"        });      // Redirect to home page if url does not     // matches any of the three mentioned above    $urlRouterProvider.otherwise("/home");});  // create empty controllers for the states as we are// not doing anything but just displaying messageapp.controller('MainCtrl', function() {});app.controller('HomeCtrl', function() {});app.controller('LoginCtrl', function() {});app.controller('SignupCtrl', function() {});
5. To run the above demo app in the browser, install http-server node module. To install the http-server module use the following command:
       npm install http-server -g

6. After Installing:–From routingDemo folder, run following command:
       http-server

Above command will host the demo app on port 8080. app can be accessed using below link:
       localhost:8080/

7. If this application is accessed via browser, Output will be as below:
8. After clicking on Login tab in the nav bar, Output will be as below:
9. Clicking on Sign up tab in the nav bar, Output will be as below:
Three routes namely Home, Login and Sign up are created in this sample application.
Applications:
Routes are important for Single Page applications as they provide different functionalities to the application on the same page.
Routes creation and manipulation is easy with the angular-ui-router module.
References:
https://github.com/angular-ui/ui-router/wiki/quick-reference
https://ui-router.github.io/ng1/docs/1.0.0-beta.1/classes/state.stateprovider.html
https://en.wikipedia.org/wiki/AngularJS
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?