AngularJS Page Refresh Problems

Overview

In this article, we will see what are the problems that occur during page refresh in AngularJS. We will take the same examples in order to explain this article. We will debug the JavaScript and will see what we have to do, in detail.

For more articles on AngularJS, refer to these links,

• Overview Of AngularJS
• Modules And Controller In AngularJS
• Controllers in AngularJS
• AngularJS ng src Directive
• AngularJS ng-Repeat Directive
• Handling Events In AngularJS
• How To Use Two-Way Data Binding In AngularJS
• Filters In AngularJS
• Sorting Data In AngularJS
• Sorting Rows By Table Header In AngularJS
• Creating Custom Filters In AngularJS
• ng-Hide And ng-Show In AngularJS
• ng-init Directive In AngularJS
• Search And MultiSearch In AngularJS
• ngInclude Directive In AngularJS
• $http Service In AngularJS
• Consuming ASP.NET WebService In AngularJS
• AnchorScroll Service In AngularJS

Introduction

We are going to take the same example that we have used in Route Parmas example. So, kindly download the code for further details.

In that example, there are various Controllers, like Home,Students, and Courses Controllers. In those, we displayed the list of students and other various details with the help of web service. 

So, this was our output.



Now, right click on the page and click Reload.



When clicked on Reload, you can see from the below output that we have lost the entire details of that particular student.



We also lost the data and styles of the webpage . Let’s see what errors we are getting. For this, right click and inspect element.



When we launch the browser developer tools, it shows the errors, as shown below.



Here, you can see that we have got same type of error -  Uncaught Syntax error:Unexpected Token .
Now, we will click on the address bar and press enter. The moment, enter is pressed, we get another error message related to style sheet.



This error says, "Resource interpreted as Stylesheet but transferred with MIME type..........." . To fix this, we will move the base tag and place it just below the title tag, as shown below.





As you can see from the above screenshot, we have moved the base tag. This will fix the CSS issue. Let's save the changes and go back to our Home Page.

Now, we will navigate to students page and browse the details of any of the student. Then, click on Reload.



This time, we don't get any error. Also, the details are displayed properly.



Check this with rest of the records too.

Conclusion

So, this was all about page refresh problem that occur in AngularJS. Hope, this article was helpful.