Angular JS Routing using UI-Router

Serpentine · 2025-02-27T05:16:07+0000

Getting Started

I've used CDN for Bootstrap, Angular JS and UI-Router so you need internet connection for them to work.

Why choose ui-router rather than angular-route?

You can visit this page if you want a more detailed instruction on the difference of the two but to sum up, ui-router can provide nested views and multiple views.

index.html

This is the main page of our app.

<!DOCTYPE html>
<html

>
<head

>
<title

>

Angular JS Routing using UI-Router</

title

>
<meta

charset

=

"utf-8"

>
<link

href

=

"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"

rel

=

"stylesheet"

>
<script

src

=

"http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"

></

script

>
<script

src

=

"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"

></

script

>
</

head

>
<body

ng-app=

"app"

>
<nav class

=

"navbar navbar-default"

>
<div

class

=

"container"

>
<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"

ui-sref=

"#"

>

SourceCodeSter</

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=

"blog"

>

Blog</

a

></

li

>
</

ul

>
</

div

>
</

div

>
</

nav>
<div

class

=

"container"

>
<div

ui-view></

div

>
<div

class

=

"row"

>
<div

class

=

"text-center"

>
<p

>

A tutorial by <a

href

=

"https://www.sourcecodester.com/users/nurhodelta2017"

>

nurhodelta_17</

a

></

p

>
<p

>

For more tutorials, visit <a

href

=

"https://www.sourcecodester.com"

>

SourceCodeSter</

a

></

p

>
</

div

>
</

div

>
</

div

>
<script

src

=

"js/app.js"

></

script

>
<script

src

=

"js/controllers/movieController.js"

></

script

>
<script

src

=

"js/controllers/dataController.js"

></

script

>
<script

src

=

"js/controllers/blogController.js"

></

script

>
</

body

>
</

html

>

app.js

This is the main angular js script of our app.

var

app =

angular.module

(

'app'

,

[

'ui.router'

]

)

;
app.config

(

function

(

$stateProvider,

$urlRouterProvider)

{
$urlRouterProvider.otherwise

(

'/home'

)

;
$stateProvider
// HOME STATES AND NESTED VIEWS
.state

(

'home'

,

{
url:

'/home'

,
templateUrl:

'partials/home.html'
}

)
// nested with custom controller
.state

(

'home.anime'

,

{
url:

'/anime'

,
templateUrl:

'partials/anime.html'

,
controller:

function

(

$scope)

{
$scope.animes

=

[

'Shokugeki no Soma'

,

'Haikyuu'

,

'Nanatsu no Tazai'

,

'Asterisk'

]

;
}
}

)
// nested with external controller
.state

(

'home.movie'

,

{
url:

'/movie'

,
templateUrl:

'partials/movie.html'

,
controller:

'movieCtrl'
}

)
// nested with string data
.state

(

'home.quote'

,

{
url:

'/quote'

,
template:

'Chance favors the prepared mind'

,
}

)
// ABOUT PAGE AND MULTIPLE NAMED VIEWS
.state

(

'about'

,

{
url:

'/about'

,
views:

{
''

:

{

templateUrl:

'partials/about.html'

}

,
'firstColumn@about'

:

{

template:

'This is the first column!'

}

,
'secondColumn@about'

:

{
templateUrl:

'partials/second_table.html'

,
controller:

'dataCtrl'
}
}
}

)
// SIMPLE PAGE
.state

(

'blog'

,

{
url:

'/blog'

,
templateUrl:

'partials/blog.html'

,
controller:

'blogCtrl'
}

)

;
}

)

;

movieController.js

This is the controller for our movie.html

'use strict'

;
app.controller

(

'movieCtrl'

,

function

(

$scope)

{
$scope.movies

=

[

'Marvels Movies'

,

'DC Movies'

,

'Science Fiction'

,

'Detective Movies'

]

;
}

)

;

dataController.js

This is the controller for our second_table.html

'use strict'

;
app.controller

(

'dataCtrl'

,

function

(

$scope)

{
$scope.friends

=

[
{
firstname:

'Gemalyn'

,
lastname:

'Cepe'
}

,
{
firstname:

'Julyn'

,
lastname:

'Divinagracia'
}

,
{
firstname:

'Rupert'

,
lastname:

'Dikoalam'
}
]

;
}

)

;

blogController.js

This is the controller for our blog.html

'use strict'

;
app.controller

(

'blogCtrl'

,

function

(

$scope)

{
$scope.blogs

=

[
{
title:

'Angular JS Crud Operation'

,
link:

'https://www.sourcecodester.com/php/11909/angularjs-crud-search-sort-and-pagination-phpmysqli.html'
}

,
{
title:

'Angular JS Progress Bar'

,
link:

'https://www.sourcecodester.com/tutorials/javascript/11928/angularjs-progress-bar-phpmysqli.html'
}

,
{
title:

'Angualr JS Deleting Multiple Rows'

,
link:

'https://www.sourcecodester.com/tuto...rjs-delete-multiple-rows-using-phpmysqli.html'
}
]

;
}

)

;

home.html

As per app.js script code, this is treated as our index page.

<div

class

=

"jumbotron text-center"

>
<h1

>

This the Home Page</

h1

>
<p

>

In this page is an example of <span

class

=

"text-danger"

>

nested</

span

>

views.</

p

>
<div

class

=

"text-center"

>
<h3

>

My Favorites</

h3

>
</

div

>
<a

ui-sref=

".anime"

>

Anime</

a

>

||
<a

ui-sref=

".movie"

>

Movie</

a

>

||
<a

ui-sref=

".quote"

>

Quote</

a

>
</

div

>
<div

ui-view>

This will be overwritten by nested views</

div

>

anime.html

This is one of the nested views.

<ul

>
<li

ng-repeat=

"anime in animes"

>

{{ anime }}</

li

>
</

ul

>

movie.html

This is the other nested view.

<ul

>
<li

ng-repeat=

"movie in movies"

>

{{ movie }}</

li

>
</

ul

>

about.html

This is our about page that contains multiple views.

<div

class

=

"jumbotron text-center"

>
<h1

>

The About Page</

h1

>
<p

>

In this page is an example of <span

class

=

"text-danger"

>

multiple</

span

>

and <span

class

=

"text-danger"

>

named</

span

>

views.</

p

>
</

div

>
<div

class

=

"row"

>
<div

class

=

"col-sm-6"

>
<h3

>

First Column</

h3

>
<div

ui-view=

"firstColumn"

></

div

>
</

div

>
<div

class

=

"col-sm-6"

>
<h3

>

Second Column</

h3

>
<div

ui-view=

"secondColumn"

></

div

>
</

div

>
</

div

>

second_table.html

This is one of the multiple views.

<table

class

=

"table table-striped table-bordered"

>
<thead

>
<tr

>
<th

>

Firstname</

th

>
<th

>

Lastname</

th

>
</

tr

>
</

thead

>
<tbody

>
<tr

ng-repeat=

"friend in friends"

>
<td

>

{{ friend.firstname }}</

td

>
<td

>

${{ friend.lastname }}</

td

>
</

tr

>
</

tbody

>
</

table

>

blog.html

Lastly, this is our blog page that contains a simple view.

<div

class

=

"jumbotron text-center"

>
<h1

>

The Blog Page</

h1

>
<p

>

In this page is an example of a Simple Route</

p

>
</

div

>
<div

class

=

"row"

>
<div

class

=

"col-xs-4 col-xs-offset-4"

>
<table

class

=

"table table-striped table-bordered"

>
<thead

>
<tr

>
<th

>

Title</

th

>
</

tr

>
</

thead

>
<tbody

>
<tr

ng-repeat=

"blog in blogs"

>
<td

><a

href

=

"{{ blog.link }}"

>

{{ blog.title }}</

a

></

td

>
</

tr

>
</

tbody

>
</

table

>
</

div

>
</

div

>

That ends this tutorial. Happy Coding :)

Download

You must upgrade your account or reply in the thread to view hidden text.

Angular JS Routing using UI-Router

More options

Serpentine

452,292

323,526

323,535