Routing in Angular JS using Angular UI Router

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: