$rootScope is lost after refresh - javascript

I have a data-binding to $rootScope.someArray in my someData.view.html. I have written a Data service to load data and populate $rootScope.someArray and have called that service in my App's "run" method. Now If I am on the someData.view.html page and hit refresh(F5) all the data vanishes. Although if I go to home again and navigate to this html page, every thing comes back.
When I put a debug point on the place in DataService code where $rootScope.someArray is being populated, I can see data getting fetched from the backend but somehow it's lost.

Basically angular won't have the data on refresh. If you want retain you data, you need to use,
session service or local storage service based on your need (Don't forget to clear on log out).
But Putting all the data in local storage services or putting sensitive data in the local storage services is not advisable. So you need to call the Back end method and assign the data to the variable in the controller init (call using ng-init).
Note : Don't dump your array of data in RootScope. AngularJs team
itself suggesting that not to use. Instead of this use Angular
Services (not Factory) and make use this services where ever you want.

Related

How to change scope variable when push notification received

I have a notification icon in my web app that shows the number of notifications. The front end of the application is made using angularjs.
The count for the icon is stored in a $rootScope variable. I want to increment the variable(or call a web service that returns count) when a push notification is received.
The serviceworker.js file does not have access to the scope variables in angularjs. How do I change the count variable's value from the serviceworker.
I thought of adding a change event listener on localStorage item.
On logging in, I will create a item.
localStorage.setItem('notifCount', 0);
When I receive a push notification, I will increment notifCount in localStorage in serviceworker.js and the change event will fire. I could add the localStorage change listener in one of controller files and call a web service or just increment the $rootScope variable.
But this would happen even when someone manually changes the localStorage in dev tools.
I want to know if I can do it this way(if it's the right way) or is there a better method. I don't feel like this is the right way.
Data is sent between workers and the main thread via a system of messages — both sides send their messages using the postMessage() method, and respond to messages via the onmessage event handler (the message is contained within the Message event's data attribute.) The data is copied rather than shared.
For more information, see
MDN Web API Reference - Using Web Workers

realoding page in background without notifying user

After a successful http request i need to reload the page to update the view outside the ng-view so i am using $window.location.reload().This is working fine but the problem is i want to reload the page silently without notifying user as the page transition works in angularjs.I also used $route.reload() but this did not work in this case.So is there any way in angularjs to reload the page in background so that the user is unaware about the reload ?
$scope.save=function()
{
$window.location.reload();
}
when the http request is resolved just run the method that loads the view again (passing the new data)
You can use events in Angular Js for updating portion outside of the ng-view. Like emit event when http request done & then broadcast it it or listen as per your requirement.
I would prefer storing user details in $localStorage, so that it would be stored until cache is cleared. It comes very handy to store information such as user details in the client side and it can be accessed across all controllers. $localStorage service can be injected into any controller and values can be set. Resetting is also easy($localStorage.$reset()) to clearing information when required. You could also use $sessionStorage.
You solve this with using $rootscope, set username with $rootScope variable,
you will update that $rootScope value when you get new username in httpservice
Edit
If in your side menu username value in text like below:
<div id="elementId">UserName</div>
or
<span id="elementId">UserName</span>
then
assign new user name value to userNameValue variable and do like below:
Use Jquery $('#elementId').text(userNameValue)

How to pass variable from client to server and persist it in the server for other functions

In my google appscripts web app, I have a variable defined in the client (js) file. Let's call that variable qty. I need that variable in a number of server functions, so currently I'm doing this:
<script>
google.script.run.serverFunction(qty);
</script>
And my server script looks like this:
function serverFunction(qty) {
...
INSERT INTO table (blah) VALUES (qty);
...
}
But instead, I want to pass qty to server once, set it as a global variable (?) ... so that I can use it directly in all my server functions and not have to pass it from the client every time.
Why do I need this?
Because currently, a savvy user can run google.script.run.serverFunction(qty); in the console and INSERT random things. Figure if the input variable is set in server, there's more control.
You will need to use:
PropertiesService.getScriptProperties()
and put the data into the Properties Service. However, one property can only hold 9k of data. If your data is over 9k, you'll need to split it up. If it's a lot more than 9k, like 100k, then it might not work to put data into the Properties Service. If you only need to hold the data for less than 6 hours, you can use Cache Service, and store up to 100k in one property.
Apps Script Documentation - Cache Service

Preserve data AngularJS after refreshing

This is my situation: I have a web application, frontend written in AngularJS/HTML.
For the moment, I have 2 views (2 different HTML - pages).
I enter in the first view a serial number, which is passed on from the first controller to the controller of the 2nd view with the help of a service.
At the second view, I display some json-data, obtained from a Django API endpoint. When I refresh the page, this data is gone and the fields are empty...
In my case, this is not so user friendly, so I want to preserve the data (or serial number I pass on in the controller) to retrieve back the data or serial number after refreshing. Because after refreshing, the variable (the serial number) will be null in my service, so the json call will fail.
I've red many things on the internet already, but nothing is actually working for me. Does anyone have an idea?
If your second view is dependent on a value, this value could be the param for your view url, instead of sharing it through service. Pass on the param using either angular ui-router or built in ngRoute.
Here are helpful links:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
https://docs.angularjs.org/api/ngRoute/service/$routeParams
You can use the $cookieStore service in angular and store the value in a cookie in the first controller, and get the value in the second controller.
$cookieStore.put("key", "value");
In, the second controller do,
$cookieStore.get("key");

How to submit test data and post requests between views in Angular?

I have a theory as to how to approach them, and was looking for some guidance on how to solve this problem and see if I am on the right path, because I am not sure.
I have a web app for a project I am building, and I have a database that I need to query for specific information. I have a search button that is attached to a function in my MainController, and I need to have my data passed on to my result.html file, which displays information from a ResultsController.
This is my theory for how to get this working using fake data, and an html request (which uses promises I imagine?)
for fake/test data, I stored an array with objects that represents JSON data in my services file that was basically the parent to ResultsController and MainController, and ResultsController would take in that information and display it on the screen.
For querying a database, my search function would search the database, and fill/replace the array in my services file with additional information. By virtue of changing that array of objects in my services, my results.html should pull down new data automatically when I click search, since the ResultsController has access to that same JSON data. (also, clicking search submits the query and then does $location.path("/results") after to get to the results page).
For querying a database and dynamically changing the information on a page, are these the right steps to submitting a request to a database in pulling information down upon each "search" request?
You are on the right track in using a service to share logic and data between the two controllers. This is generally seen as best practice - and it is better than the approach that is sometimes used of putting the logic and data in a parent controller, and using scope to access it in child controller.
The style guide linked to above is worth a read if you are looking for some guidance on best practice in setting up an angular app (https://github.com/johnpapa/angular-styleguide).

Categories