Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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

ui router multiple named nested views

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.

ui-router multiple named views example

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

AngularJS tutorial for beginners

2 comments:

  1. Hi Vanket,

    You are doing a great job.I have learned a lot from your vides and tutorials and still learning new ideas. Kindly give me the chance to help you by any means in technology.

    If possible then make video on AngularJS CRUD operation using Modal Dialogue. Means when user click on Add or Edit it popup the form. Furhter user can upload image or doc file without submit the form when file is uploaded then user can submit the form.

    Also make videos on client side and server side validation in AngularJS.

    Regards.
    Saqib

    ReplyDelete
  2. Hello Sir
    Sub --" Problem in Name updating but i dont want to update image "

    I m beginner In MVC i was your all MVC video
    and also practices at my home
    i am facing a problem in Image upload in MVC
    I have done Image uploaded but where i want to update other details except Image file than that image file goes Null
    if i choose any other file it working fine
    please help me sir

    ReplyDelete

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.