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

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

Resource interpreted as Stylesheet but transferred with MIME type texthtml

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

angularjs html5mode refresh 404

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.

angularjs routing refresh

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

angularjs refresh page 404

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.

AngularJS tutorial for beginners

No comments:

Post a Comment

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.