20

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.

user2167582
  • 5,986
  • 13
  • 64
  • 121
  • I don't understand your second question. – John Woodruff Jul 03 '13 at 23:58
  • 1
    what I'm trying to say is, refresh destroys app and thus all modules gets a reset, is there a service that preserves and doens't get destroyed? or is there a way to make an app indestructable by refresh. – user2167582 Jul 09 '13 at 18:17
  • 1
    The only ways I can think of would be to use localStorage or saving that data to a server which it pulls upon visiting the application. As far as I'm aware there is no Angular way to do this. – John Woodruff Jul 09 '13 at 20:00

3 Answers3

21

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.

pasine
  • 11,311
  • 10
  • 49
  • 81
  • 1
    is there a way to disable browser refresh to only allow $route.reload? – user2167582 Jul 10 '13 at 16:20
  • Do you mean disabling page refresh? I don't think this can be completely possible. Take a look at this question asking for the same thing http://stackoverflow.com/questions/2482059/disable-f5-and-browser-refresh-using-javascript – pasine Jul 10 '13 at 21:26
  • 1
    @notme: This did not worked for me i just added $scope.reloadCtrl = function(){ console.log('reloading...'); $route.reload(); } this did not fired ? – jsduniya Apr 25 '14 at 07:41
  • @pasine I am using $routeProvider for routing. I am storing loggedInUser details in a variable. So, when I'm refreshing my page, the value of the variable becomes blank. Can you suggest any option? How I will handle this? – Kaushick Gope Nov 14 '14 at 10:37
  • @KaushickGope where are you storing your variable? $scope? $rootScope? – pasine Nov 14 '14 at 11:58
  • @pasine At first I was storing my data in a global object, set by var myApp = angular.module('myApp', []); myApp.value('loggedInUser', obj); Now I'm using local storage for that and working fine. Is there any other option to do that? – Kaushick Gope Nov 14 '14 at 13:22
11

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

ihor marusyk
  • 1,960
  • 1
  • 12
  • 12
2

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

hamncheez
  • 709
  • 12
  • 22