Angular ui router multiple named views

Suggested Videos
Part 49 - AngularJS ui router html5mode
Part 50 - ui router active state css
Part 51 - AngularJS ui-router nested views



In this video we will discuss multiple named views in angular with an example.



Here is what we want to do. On the students page, we want to display all the student totals i.e
1. Total Male Students
2. Total Female Students
3. Grand Total



On the studentDetails page, we want to display only the following 2 student totals i.e
1. Total Male Students
2. Total Female Students

Grand Total should not be displayed on studentDetails page.



Here are the steps to achieve this

Step 1 : Modify HTML in studentParent.html as shown below. 

1. Comment or delete the line that displays Grand Total. 
2. Include 2 ui-view elements and provide a meaningful name. The ui-view element that is named "totalData" is responsible for displaying Grand Total. The ui-view element that is named "studentData" is responsible for displaying students list or student details depending on which page you are viewing.

<h3>Total Male Students : {{stdParentCtrl.males}}</h3>

<h3>Total Female Students : {{stdParentCtrl.females}}</h3>

<!--<h3>Grand Total : {{stdParentCtrl.total}}</h3>-->

<div ui-view="totalData"></div>

<div ui-view="studentData"></div>

Step 2 : In script.js modify "studentParent.students" state as shown below. Notice we are using "views" property to tell which controller and template file to use for each of the named views in studentParent.html

a) studentsController function and students.html template file will be used to generate content for "studentData" view
b) studentsTotalController function and studentsTotal.html template file will be used to generate content for "studentData" view

"studentsTotalController" function and "studentsTotal.html" template file are not created yet. We will do that in Step 3.

.state("studentParent.students", {

    url: "/",

    views : {

        "studentData" : {

            templateUrl: "Templates/students.html",

            controller: "studentsController",

            controllerAs: "studentsCtrl",

            resolve: {

                studentslist: function ($http) {

                    return $http.get("StudentService.asmx/GetAllStudents")

                            .then(function (response) {

                                return response.data;

                            })

                }

            }

        },

        "totalData": {

            templateUrl: "Templates/studentsTotal.html",

            controller: "studentsTotalController",

            controllerAs: "studentsTotalCtrl",

        }

    }              

})

Step 3 : In script.js, create "studentsTotalController" function. The resolved dependency "studentTotals" from the parent state is injected into the controller function. The "total" property of "studentTotals" is then used as the value for this.total, which will be used by the view to display Grand Total.

.controller("studentsTotalController", function (studentTotals) {

    this.total = studentTotals.total;

})

Step 4 : Add a new html file to Templates folder. Name it studentsTotal.html. All we do here is display grand total using an h3 element.

<h3>Grand Total : {{studentsTotalCtrl.total}}</h3>

Step 5 :  In script.js modify "studentParent.studentDetails" state as shown below. Notice here we are using only one of the named views i.e "studentData". "studentDetailsController" function and "studentDetails.html" template file will be used to generate content for "studentData" view. Since we do not want to display Grand Total, we are not using the other named view i.e "totalData".

.state("studentParent.studentDetails", {

    url: "/:id",

    views :{

        "studentData": {

            templateUrl: "Templates/studentDetails.html",

            controller: "studentDetailsController",

            controllerAs: "studentDetailsCtrl"

        }

    }

})