Please wait...

AngularJs nested routing using ui-routing : 10 minutes

AngularJs nested routing  using ui-routing : 10 minutes

@AngularJs  @ nested  @ ui-routing  @ minutes  


AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions.?


AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. 



AngularJS provides to create a single page applications. When creating single page applications, routing will be very important. Ui-routing provide nested view routing .UI-Router is the defacto standard for routing in AngularJS. UI-Router has become the standard choice for routing non-trivial apps in AngularJS (1.x).The UI-Router is a routing framework for AngularJS.




Project Structure 

ui-routing                        // Project directory
    - index.html                  // will hold the main template for our app
    - app.js                      // our angular code
    - angular-ui-router.min.js    // angular-ui-router.min JS
    - angular.min.js              // angularjs File
    - pages                       // view directory
        - header.html             // about page code
        - home.html               // home page code
        - about.html              // about page code
        - contact.html            //  about page code

Create Index.html and add code

<!DOCTYPE html><html>
<title>Ui-routing Examples</title><link rel="stylesheet" type="text/css" href="">
<style type="text/css">
            padding: 0px;
            width: 100%;
<script type="text/javascript" src="angular.min.js"><script>
<script type="text/javascript" src="angular-ui-router.min.js"></script>
<script src="app.js"></script>
<body ng-app="UiRouting"><div ui-view></div>


Create app.js and add code

var app = angular.module('UiRouting', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
     .state('header', {
        url: '/header',
        abstract: true,
        templateUrl: 'pages/header.html'
    .state('header.home', {
        url: '/home',
        views: {
          'container': {
            templateUrl: 'pages/home.html'
    .state('header.about', {
        url: '/about',
        views: {
          'container': {
            templateUrl: 'pages/about.html'
    .state('', {
        url: '/contact',
        views: {
          'container': {
            templateUrl: 'pages/contact.html'

Create header.html and add code

<div><nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="header.home">Ui-routing Examples</a>
</div><ul class="nav navbar-nav"><li>
<a ui-sref="header.home">Home></a></li>
<li><a ui-sref="header.about">About></a></li>
<li><a ui-sref="">Contact></a></li>
<div ui-view="container"></div>

Create Other HTML pages like home about contact etc..

Result : 


Github Link:


Thank you :)

Comments 0