AngularJS: Routing with UI-Router

By ongraph
December 17, 2014 | 2018 Views

Latest Industry insights to keep you updated on the latest happenings.

Overview

 

What is AngularUI Router?

The UI-Route, routing framework, is for AngularJS from the AngularUI team. It provides a different approach than ngRoute. It changes your application views based on state of the application and not just the route URL.

 

States vs URL Route

With UI-Router’s states approach, your views and routes aren’t tied down to the site URL. This way, you can change the parts of your site using your routing even if the URL does not change.
When using ngRoute, you would have to use ngInclude/other methods and this may be get confusing. Now one .config() method, all of your states, routing, and views get handled, this would help when using a top-down view of your application.

 

Sample Application

Let’s create an application with Home and About page.

Setup

Let’s get application structure ready.
– index.html                    // will hold the main template for our app
– app.js                        // our angular code
– partial-about.html            // about page code
– partial-home.html             // home page code
– partial-home-list.html        // injected into the home page
– table-data.html               // re-usable table that we can place anywhere

Application structure figured out, let’s put some code in files.

<!– index.html –>
<!DOCTYPE html>
<html>
<head>
<!– CSS (load bootstrap) –>
<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<style>
.navbar { border-radius:0; }
</style>
<!– JS (load angular, ui-router, and our custom js file) –>
<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>
<!– apply our angular app to our site –>
<body ng-app=”routerApp”>
<!– NAVIGATION –>
<nav class=”navbar navbar-inverse” role=”navigation”>
<div class=”navbar-header”>
<a class=”navbar-brand” ui-sref=”#”>AngularUI Router</a>
</div>
<ul class=”nav navbar-nav”>
<li><a ui-sref=”home”>Home</a></li>
<li><a ui-sref=”about”>About</a></li>
</ul>
</nav>
<!– MAIN CONTENT –>
<div class=”container”>
<!– THIS IS WHERE WE WILL INJECT OUR CONTENT  –>
<div ui-view></div>
</div>
</body>
</html>

 

This is our main HTML file and we are using Bootstrap for styling.

Note- we also loaded ui-router libreary with loading Angular. UI Router is separate from the Angular core, just like ngRoute is separate.
For creating a link with UI-Router, we use ui-sref with a certain state of your application. The href will be generated from this. These are created in app.js.

We will use <div ui-view></div> instead of ngRoute’s <div ng-view></div>.

Let’s start up our Angular application now in app.js.

// app.js
var routerApp = angular.module(‘routerApp’, [‘ui.router’]);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise(‘/home’);
$stateProvider
// HOME STATES AND NESTED VIEWS
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘partial-home.html’
})
// ABOUT PAGE AND MULTIPLE NAMED VIEWS
.state(‘about’, {
// we’ll get to this in a bit
});
});

 

Here we have created the routerApp that is already applied to html body in the index.html file.

We have .state() for home and for about. In home, we are using the template file partial-home.html.
Let’s put some information in partial-home.html to see on page.

<!– partial-home.html –>
<div class=”jumbotron text-center”>
<h1>The Homey Page</h1>
<p>This page demonstrates <span class=”text-danger”>nested</span> views.</p>
</div>

Now we have home page with some info!!

 

Nested Views Home Page

Let’s have a look how nested views work. We will put some buttons on home page and will show some diffrent views when those clicked. So add buttons to partial-home.html like below:

<!– partial-home.html –>
<div class=”jumbotron text-center”>
<h1>The Homey Page</h1>
<p>This page demonstrates <span class=”text-danger”>nested</span> views.</p>
<a ui-sref=”.list” class=”btn btn-primary”>List</a>
<a ui-sref=”.paragraph” class=”btn btn-danger”>Paragraph</a>
</div>
<div ui-view></div>

 

When linking to a nested view, we are going to use dot denotation:
ui-sref=”.list” and ui-sref=”.paragraph”. We will define these in Angular file and once we set it up there, we will inject into our new <div ui-view></div>.

In app.js file, let’s add nested states.

// app.js

$
// HOME STATES AND NESTED VIEWS
.state(‘home’, {
url: ‘/home’,
templateUrl: ‘partial-home.html’
})
// nested list with custom controller
.state(‘home.list’, {
url: ‘/list’,
templateUrl: ‘partial-home-list.html’,
controller: function($scope) {
$scope.dogs = [‘Bernese’, ‘Husky’, ‘Goldendoodle’];
}
})
// nested list with just some random string data
.state(‘home.paragraph’, {
url: ‘/paragraph’,
template: ‘I could sure use a drink right now.’
})

RECOMMENDED

Monthly industry insights to keep you updated on latest happenings

Follow us on Twitter
Follow us on Facebook
Follow us on Linkedin