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,

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.

output

Now, right click on the page and click Reload.

output

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

output

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.

output

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

errors

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.

error

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.

code

code

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.

output

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.

 

Up Next
    Ebook Download
    View all
    Learn
    View all