Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does angular application handle refresh page and could we use $history on loading directives

Tags:

So two questions.

  1. How does angular applications handle refresh page, b/c from what I heard, $rootScope destroy() on refresh and application gets re-run and re-config -ed, and I was wondering if there's an elegant way to preserve the $rootScope without having to store $rootScope variables as a string into a storage.

  2. If I load a template on a directive that loads a modal on the page, is it possible to configure history to not navigate but to revert the open modal. and due to validations and such, I do not think it is possible to implement same function using href.

like image 618
user2167582 Avatar asked Jun 26 '13 15:06

user2167582


People also ask

What happens when we refresh a page in angular?

From then on, the Angular framework kick in and loads the appropriate modules and pages as route changes. When you refresh the page you lose all the state of the application since you are reloading the index. html with all the required dependencies again.

How can I refresh a page in angular?

One is to use window. reload to reload the entire page, and the other is to use the onSameUrlNavigation-reload refresh component with an angle router.


3 Answers

If your url's are mapped with the $routeProvider, you can reload a controller invoking $route.reload(). This refresh the page without destroy the $rootScope.
I have create a plunker to show this. The controller counts how many times the page has been reloaded.

like image 78
pasine Avatar answered Oct 24 '22 09:10

pasine


There is probably no way to preserve any javascript variable through a page reload and $rootScope is just a javascript variable.

It seems though that what you are looking for is a way to make your application "start from the same point" that it was left at when a page was reloaded. I would recommend you to get familiar with notion of state. Every application can be viewed as a set of states and transitions between them. Every user interaction or any other actions that happen within applications either change the state of application or keep it in the same state. For example: clicking a user link from a list of users changes the state from "view users list" to "view user details for user with id=213", clicking an "Edit" button on "view user details for user with id=213" changes state to "edit user with id = 213". And as those transitions take place variables are being assigned values, views change, requests get sent out etc.

The two things that are needed for "start from the same point" problem are state manager and a way to serialize and store states.

As a state manager besides the core $router directive you can use ui-router. As for a way to serialize and store a state with ui-router does this through URL. The benefit of ui-router over core $router is that it allows for nested states and is generally more flexible.

ui-router has also a solution for your second question in its github wiki https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-open-a-dialogmodal-at-a-certain-state

like image 34
ihor marusyk Avatar answered Oct 24 '22 11:10

ihor marusyk


Could you not use window.localstorage to preserve your js variables? That way if the user refreshes the page outside of the app you could reload your values

like image 31
hamncheez Avatar answered Oct 24 '22 11:10

hamncheez