AngularJS UI-Router Multiple Named Views

Overview

In this article, we will learn about multiple named Views in detail, with an example. So, let’s start.

For more articles on AngularJS, refer to these links.

Introduction

One of the benefits of using UI-Router over ng-route is that UI-Router supports multiple named Views. Let’s understand the multiple named Views. We will continue with the same example which we had carried out for displaying the total number of females, males, and list of students in article AngularJS UI-Router Nested Views.

Right now, when we click on details of students, our current output is -

Here, I want to display only the total number of males and females in that. I don’t want to display the total number of students. We are going to solve this problem by using multiple named Views.

First, we will create two named Views. Right now, our studentparent.html page contains Views tag as-

Now, we add two divs and one will display the parent view and other will display the child view as,

The first div will be responsible for displaying parent View details and the second div will be responsible for displaying child View details.

The next step is to modify our studentParent.student state in our Controller file.

We will write Views and then pass the child View as student Data.

.state("studentParent.students", {
url: "/",
views:{
"studentData" : {
templateUrl: "Templates/students.html",
controller: "studentsController as studentsCtrl",
resolve: {
studentsList: function ($http) {
return $http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
return response.data;
})
}
}
}
}
})

We have another View, totalData View, that our Controller page is going to display. We will make use of this totalData named View. So, add these lines in the Controller.

We don’t have studentstotal.html and studentstotal Controller. So, we will create that first.

This our studentsController.

.controller("studentsTotalController", function (studentTotals) {
this.total = studentTotals.total;
})

Notice that we are injecting students total which is coming from the parent state so if you look our state as -
.state("studentParent.students", {

For student, the parent is studentParent and within studentparent, we have resolved the dependency as studentsTotals. So, this can be passed safely to all the child Controller functions.

And studentsTotal Controller function is the child Controller.

Now, the next step is to create a View Template called studentsTotal.html. Add an html file in templates folder,

As we are using Controller as syntax, we bound that with studentsTotalctrl. Here, we want to display totals respectively.

The next step is to modify studentdetailscontroller as,

So, our final Controller code is,

/// <reference path="angular.min.js" />
/// <reference path="angular-route.min.js" />
var app = angular.module("Demo", ["ui.router"])
.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider,$locationProvider) {
// $routeProvider.caseInsensitiveMatch = true;
$urlRouterProvider.otherwise("/home");
$urlMatcherFactoryProvider.caseInsensitive(true);
$stateProvider
.state("home", {
url: "/home",
templateUrl: "Templates/home.html",
controller: "homeController as homeCtrl",
data:{
customData1: "Home State Custom Data 1",
customData2:"Home Statae custom Data 2"
}
})
.state("courses", {
url: "/courses",
templateUrl: "Templates/courses.html",
controller: "coursesController as coursesCtrl",
data: {
customData1: "Courses State Custom Data 1",
customData2: "Courses Statae custom Data 2"
}
})
.state("studentParent", {
url: "/students/",
controller: "studentParentController",
controllerAs: "stdParentCtrl",
templateUrl: "Templates/stduentParent.html",
resolve: {
studentTotals: function ($http) {
return $http.get("StudentService.asmx/GetStudentTotals")
.then(function (response) {
return response.data;
})
}
},
abstract: true
})
.state("studentParent.students", {
url: "/",
views:{
"studentData" : {
templateUrl: "Templates/students.html",
controller: "studentsController as studentsCtrl",
resolve: {
studentsList: function ($http) {
return $http.get("StudentService.asmx/GetAllStudents")
.then(function (response) {
return response.data;
})
}
}
},
"totalData": {
templateUrl: "Templates/studentsTotal.html",
controller: "studentsTotalController as studentsTotalCtrl",
}
}
})
.state("studentParent.studentDetails", {
url: "/:id",
views:{
"studentData": {
templateUrl: "Templates/studentDetail.html",
controller: "studentdetailcontroller as StudentDetailCtrl"
}
}
})
// .when("/studentssearch/:name?", {
// templateurl: "templates/studentssearch.html",
// controller: "studentssearchcontroller as studentssearchctrl"
// })
// .otherwise({
// redirectto: "/home"
// })
$locationProvider.html5Mode(true);
})
.controller("homeController", function ($state) {
this.message = "Home Page";
this.homeCustomData1 = $state.current.data.customData1;
this.homeCustomData2 = $state.current.data.customData2;
this.coursesCustomData1 = $state.get("courses").data.customData1;
this.coursesCustomData2 = $state.get("courses").data.customData2;
})
.controller("coursesController", function () {
this.courses = ["c#", "SQL", "Oracle"];
})
.controller("studentsController", function (studentsList, $state, $location,studentTotals) {
var vm = this;
vm.searchStudents = function () {
if (vm.name) {
$location.url("/studentsSearch/" + vm.name);
}
else {
$location.url("/studentsSearch/");
}
}
vm.reloadData = function () {
$state.reload();
}
vm.students = studentsList;
vm.studentTotals = studentTotals;
})
.controller("studentParentController", function (studentTotals) {
this.males = studentTotals.males;
this.females = studentTotals.females;
this.total = studentTotals.total;
})
.controller("studentsTotalController", function (studentTotals) {
this.total = studentTotals.total;
})
.controller("studentdetailcontroller", function ($http, $stateParams) {
var vm = this;
$http({
url: "StudentService.asmx/GetStudents",
method: "get",
params: {id:$stateParams.id}
})
.then(function (response) {
vm.student = response.data;
})
})
//.controller("studentsSearchController", function ($http, $routeParams) {
// var vm = this;
// if ($routeParams.name) {
// $http({
// url: "StudentService.asmx/GetStudentsByName",
// params: { name: $routeParams.name },
// })
//.then(function (response) {
// vm.students = response.data;
//})
// }
// else {
// $http.get("StudentService.asmx/GetAllStudents")
// .then(function (response) {
// vm.students = response.data;
// })
// }

Save the changes and run the app.

When you click on students View, you will get the following output.

When you click on any student, you get the output, as shown below.

Conclusion - This was all about UI-Router multiple Views. Hope this article was helpful!!