AngularJS page refresh problem

Suggested Videos
Part 28 - AngularJS default route
Part 29 - AngularJS intellisense in visual studio
Part 30 - AngularJS routeparams example



In this video we will discuss page refresh issue that may arise when you refresh the page by pressing CTRL + F5 or CTRL + R. This is continuation to Part 30. Please watch Part 30 from AngularJS Tutorial before proceeding.



What is the issue : When you navigate to http://localhost/students, you will see list of students as shown below



Click on any student name. For example when you click on Mark, you will see mark details and the URL in the address bar is http://localhost/students/1




At this point if you refresh the page by pressing CTRL + F5 or CTRL + R, the student details disappear and the page will be renedered as shown below.



To see the errors, launch the Browser Developer Tools by pressing F12.



To fix this issue all you have to do is place the <base href="/"> element just below the <title> element in the head section of index.html page.