Back to Top

AngularJS Routing Using UI-Router

angular js routing mechanism

Angular JS is very popular nowadays due to its simplicity and easy to implement.Routing in Angular Js makes the single page application aka Single Page APP(SPA) more popular. SPA is to switch to another view without refreshing the page and usually we use the ajax request to fetch the data from the background and render the HTML.

All MVC framework which is for frontend application has a routing feature because it is essential to building the single page application(SPA).

What is Routing?

Routing is a mechanism used to navigate through the deep link.You can organize the various views of a single page application(SPA) using routing mechanisms in well manner.

There are two types of Routing Mechanism in Angular JS

  1. Inbuilt Router
  2. UI Router

In-built Router(ngRoute)

ngRoute is an inbuilt Router which is provided by Angular using a hash and history. There are two ways to achieve the ngRoute.In Built ngRoute is simply routing a single URL which you can bind to the single controller with the single template.

ngRoute is a separate module which contains following:

$route – it is used for getting matched route, routing events such as access the current route controller and to provide property access

$routeProvider – It is used to define a routing table that the address bar and map the view template.Using $routeProvider Service, You can allow to save the API browsing history and allows users to save a bookmark of the current path for future use

$routeParams – It saves the parameter in address bar.

$routeProvider – routing table has two core methods

1.when (path, route)

This method takes two parameters:

Path is a string type which match with routing path rule. It will work with the address bar contents ($location.path) values to match. To match the parameters, you can use the colon in the path name.

Example:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
      controller: 'HomeController',
      template: '

We are home

' }) }]);

when the method of $routeProvider can also handle the query string or id passed in the URL which you can pass after the /:number.$routeProvider will match URL id and the id as a key service used in the $routeParams

$routeProvider.when('/person/:id', {
  controller: 'PersonController',
  template: '
Person Name is: {{ name }}
' })

2. otherwise (params)

The otherwise method is useful to redirect to the user on the specific page if your routed page not found.

angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    controller: 'HomeController',
    template: '

We are home

' }) .otherwise({redirectTo: '/'}); }]);

SYNTAX:

$routeProvider(current,single level)

UI Router

As in built ngRoute has limited features so sometimes it can not meet the development needs! At that time, third-party routing module ui router comes in use. Let’s understand how UI Router useful.UI-Router in angular js is basically based on the state machine which provides the routing mechanism and nested functions.

What is UI Router?

UI-Router is not the ​inbuilt tool so we can say it is third party tool to develop features not available in inbuilt one.ngRoute does not provide Nesting and view named property.It allows state based URL to organize the UI rendering interface.It also allows a use of multiple views on the same page which improves the functionality of a view.UI-Router is an excellent way to manage the very complex web application.

Installation

For Installation of UI Router library, you can either use Bower or you can choose to download the release version.

$ bower install angular-ui-router --save

Also you need the source file that contains the page:

 

Most Popular Posts

How To use Singleton Design Pattern in PHP

Posted on 7 years ago

Bhumi

How to use SSL in WordPress

Posted on 6 years ago

Bhumi

PHP Tutorial for beginners

Posted on 2 years ago

Bhumi

How to use session in Magento

Posted on 6 years ago

Bhumi

The Reader’s Poll – June 2015

Posted on 3 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 4 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 4 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi