Routing in Angular JS using Angular UI Router

Last Updated : 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/[email protected]/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 dependency 
var app = angular.module('myApp', [ "ui.router" ]); 
  
// define route configurations inside app.config 
// injecting dependencies 
app.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 message 
app.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:

PHP | symlink( ) function

neerajnegi174

Improve

Article Tags :

Routing in Angular JS using Angular UI Router

Similar Reads

Thank You!

What kind of Experience do you want to share?