Routing In AngularJS Using UI-Router

on June 18, 2017
πŸ”₯ 3736 views
Contents hide
1) What Is AngularUI Router?
2) Directories
3) Implementation
4) Components
5) App Router

In this tutorial, we will see how to do Routing In AngularJS Using UI-Router. It is a very simple to create a route in AngularJS using UI-Router, all you need to know is some basic concept of AngularJS.

Check out the demo on how to do Routing In AngularJS Using UI-Router.



What Is AngularUI Router?

Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.
UI-Router applications are modeled as a hierarchical tree of states. UI-Router provides a state machine to manage the transitions between those application states in a transaction-like manner.

 

Directories

So let’s start with building the app structure. We will be specifying every component in a different folder so starting with folder structure.

Directories

|--- index.html
|
|---app(folder)
|     |---shared(folder)
|     |        |---header(folder)
|     |        |        |---header.html
|     |        |
|     |        |---footer(folder)
|     |                 |---footer.html
|     |
|     |---components(folder)
|     |            |---home(folder)
|     |            |      |---header.html
|     |            |
|     |            |---contact(folder)
|     |            |      |---contact.html
|     |            |
|     |            |---about(folder)
|     |                   |---about.html
|     |
|     |---app.routes.js

Implementation

To create a routing process we will be using the AngularJS,
Angular-UI-Router and the Bootstrap(optional) for design purpose.
let’s start with implementing the dependencies.
Now include the required libraries into our index.html

index.html

<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
</head>
  <body ng-app="demo">
      <div ui-view="header"></div>
      <div ui-view=""></div>
      <div ui-view="footer"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js" ></script>
      <!-- Main app routes js -->
      <script src="app/app.routes.js"></script>
  </body>
</html>

Here you can see we have included Angular.min.js, Angular-UI-router and our main app.routes.js at bottom of the page, and the bootstrap.min.css at the top of the page.
and also we have included ui-view for different views such as header, footer and the middle content to be loaded in each state.

And if you are using the package manager(npm) you can download through a command in terminal:

BASH

$ npm install angular --save // AngularJS

$ npm install angular-ui-router --save // angular UI-router

$ npm install bootstrap@3 --save // Latest Bootsrap v 3.x.x

Components

After setting up the index file, we will start building our components in which each component will be separated by folder wise.
let’s first implement the header view from there we will be linking our components using UI-router, as you can see our directory structure we have separated header and footer in the shared folder and other pages in components.

app/shared/header/header.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a ui-sref="home">Home</a></li>
		<li><a ui-sref="about">About</a></li>
		<li><a ui-sref="contact">contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

As you can see instead of href we will be using ui-sref , which will route the components which we will be assigned in the app.routes.js file.
Similarly create your own custom components i.e header, footer, home page, etc as the directory structure shown.
See the folder structure with demo over HERE.

App Router

Now we have to create the demo that we already applied to our body in the index.html file.
start building the app through the app.routes.js, first of all, we will create an angular module for the component that we will be using.

app/app.routes.js

// demo : app name
// ui.router : Angular-ui-router module
// app.routes : custom routes module
var app = angular.module('demo', ['ui.router', 'app.routes']);

you can see we have created our demo angularApp by implementing the module i.e ui-router imported from the CDN link and the other one app.routes, in that module we will create our custom routes. So let’s begin with building module.

app/app.routes.js

var app = angular.module('demo', ['ui.router', 'app.routes']);
angular.module('app.routes',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {

// create default view 
$urlRouterProvider.otherwise("/home"); 


$stateProvider
// home states and nested view
.state('home', {
	url: "/home",
	views : {
		"" : {
			templateUrl:"app/components/home/home.html",
		},
		"header" : {
			templateUrl:"app/shared/header/header.html"
		},
		"footer" : {
			templateUrl:"app/shared/footer/footer.html"
		}
	}
})
// about states and nested view
.state('about', {
	url: "/about",
	views : {
		"" : {
			templateUrl:"app/components/about/about.html",
		},
		"header" : {
			templateUrl:"app/shared/header/header.html"
		},
		"footer" : {
			templateUrl:"app/shared/footer/footer.html"
		}
	}
})
.state('contact', {
	url: "/contact",
	views : {
// ... paths for contact view as define above
}
});
});

Here we have a .state() for home, about and for contact. In the home, we are using the template file home.html. so as for other pages.

NOTE: The app should be run on localhost server to see the working of the ui-router

Get Some More Angular Here!

Tags: , , , , ,