AngularJS Page Refresh Problems


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,


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.

students page

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


Check this with rest of the records too.


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


Similar Articles