Routing in angularjs using ui-router

By

AngularJS provides a simple way to create single page applications. To create single page applications we need to use routing. Using routing in angularjs we can create an application navigate to another page without site refresh. Just you see only url changes dynamically. We are not using ngRoute to create routing in angularjs. We are setting up routing in angularjs using UI-Router. Ui-router is a seperate routing framework created by team for more follow Docs. Today we’ll be looking at how to use routing in angularjs using ui-router.

What is angularjs ui-router :-

AngularJS UI-Router is a routing framework. Which work with state machine to organize the parts of your interface. UI-Router is organized around states, which may optionally have routes, behavior, attached.

Steps to setup routing in angularjs using ui-router :-

1. Download and Include angular-ui-router.js or angular-ui-router.min.js to your main page like index.html.

<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>

2. Add ui.router to your main module’s list of dependencies.

Application Example of Nested States & Views :-

Now we are creating a example of single page application using ui-router in angularjs. we need some files to create.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="routeApp">
<div class="container">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="home">Home</a>
      <a class="navbar-brand" ui-sref="about">About</a>
    </div>
  </div>
</nav>
<div class="row">
    <div class="span12">
      <div ui-view></div>        
    </div>
  </div>    
</div>
</body>
</html>

Files:-

index.html  //main page
home.html   // section of home page
about.html  // about us page
contact.html // contact form which is neted with about
app.js // angularjs code file

Now let’s embed some code in files.

index.html :-

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</head>
<body ng-app="routeApp">
<div class="container">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="home">Home</a>
      <a class="navbar-brand" ui-sref="about">About</a>
    </div>
  </div>
</nav>
<div class="row">
    <div class="span12">
      <div ui-view></div>        
    </div>
  </div>    
</div>
</body>
</html>

In this file we have included bootstrap and ui-router and angularjs self file. On anchor tag we are using ui-sref directive which will bind a link to state. read ui-sref. Also we are using

<div ui-view></div>

. That is the key to nesting states and views. Now let’s create some more files.

home.html :- This is only some example text files which shows or will be load on default home page.

<div class="col-sm-8 col-sm-offset-2">
    <div class="page-header"><h1>Home page</h1></div>
</div>

about.html :- In this file we have added

<div ui-view></div>

cause we are using nesting here with contact.html

<div class="col-sm-8 col-sm-offset-2">
  <div class="page-header"><h1>About Us page</h1></div>
  <p>Click to "Show contact form" to see nesting</p>
</div>
<div class="col-sm-8 col-sm-offset-2">
  <a ui-sref="about.contact">Show contact form</a>
</div>
<div ui-view></div>

contact.html :- Which is also have sample form code.

<div class="col-sm-8 col-sm-offset-2">
  <form name="userForm" >
    <div class="form-group">
      <label>Name</label>
      <input type="text" name="name" class="form-control" ng-model="user.name">
    </div>
    <div class="form-group">
      <label>Username</label>
      <input type="text" name="username" class="form-control" ng-model="user.username">
    </div>
    <div class="form-group">
      <label>Email</label>
      <input type="email" name="email" class="form-control" ng-model="user.email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Now let’s create angularjs code to make all files work as a single page application.

app.js :-

var app = angular.module('routeApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
  // For any unmatched url, redirect to /home
  $urlRouterProvider.otherwise("/home");
   // Now set up the states
  $stateProvider
    .state('home', {
      url:"", // which keep root url.
      templateUrl:"home.html"
    })
    .state('about', {
      url: "/about",
      templateUrl: "about.html"
    })
    .state('about.contact', {
      url: "/contact",
      templateUrl: "contact.html",
    });
});

Now in app.js we are setting up states in module config with .config() . Then $stateProvider wired up our all state or pages. Using below code we nesting about and contact page both in single page again.

Nesting in about page ui-sref.

<a ui-sref="about.contact">Show contact form</a>

then angular code state.

.state('about.contact', {
      url: "/contact",
      templateUrl: "contact.html",
});

Multiple & Named Views :-

Using ui-view you can add multiple views in single page. Also you can use name for each views like.

Add below code to your index.html

<div ui-view="view1"></div>
<div ui-view="view2"></div>

and add below code to app.js

app.config(function($stateProvider) {
  $stateProvider
    .state('index', {
      url: "",
      views: {
        "view1": { templateUrl: "view1.html" },
        "view2": { templateUrl: "view2.html" }
      }
    })
});