Preserve data AngularJS after refreshing - javascript

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");

Related

$rootScope is lost after refresh

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.

form component data from the web-api on every page

I have various page in my project and each page contain lots of drop down.
For getting options of drop-down from web-api and then i store this variable in angular service variable for further use in another view.
But i didn't get the way where should i call web-api to get drop-down data so that it doesn't matter which page should i open first or by default???
And i get options of drop-down every where.Currently i calling web-api in the controller which is correspond to my first view of application.
My approaches regarding this:
Method 1: I create a root controller in which i call angular service which call web-api to get data. The view is already render on view-port before get the the from web-api.
Method 2: i call angular service which call web-api in controller(not root controller which to specific to a view) and populate data in drop-down after successful callback from service so this working fine but it's not generic
Services/Factory are singleton, so I believe you should call the web api in your service rather than in controller and then passing the data to service.
EDIT -
If you are concern about the display of view before the data then you can use resolve as resolve can wait for data to become available before showing a view.

Ionic - Getting ID from previous page to update with new data on next page

I have some data from first page (or "Data Form" page) that needs to be loaded on next page (or "Add More Info" page) with same ID from first page before any controller is executed in my ionic application with sqlite database. In next page (or "Add More Info" page), I want add some new data to previous data with same ID before return again to first page.
You can check my flowchart below:
How can I achieve that?
You can check out my repo on github to fix this problem.
You have several options of that :
EASIEST BUT "dirty"
You can use $rootScope to store all you data and initialise them on each of controller.
Clean Solution parameters
You can define ui-router parameters for each of the variables you want to send.
See ui-router doc : https://github.com/angular-ui/ui-router/wiki/URL-Routing
using LocalStorage
For persistance, you can use localStorage. It is clean and won't impact your routing ruleS.
Better solution, using a service
See that explanation concerning data persistance and services :
https://stackoverflow.com/a/12574818/3687474
I'll personnaly go for the service solution that is scalable, portable and testable

accessing client side jquery variable in server side groovy page

I have a variable in my JavaScript which contains the id of the clicked row in the master grid. I want to pass it to the groovy service page that handles my child grid so that it can filter the rows based on that id. How do I do that?
The problem is that your javascript-based grid runs on the client, while the page is rendered server-side. Therefore, some communication must take place in order to instruct your application to filter rows based on what the user selects.
Grails uses the MVC architecture, this means that there is a controller that takes care of answering the requests generated from the client. To answer these requests, the Controller can make use of the Views (.gsp files). So when you call to the URL controller/index you may make use of an index.gsp view to render your page.
What you need to do is to make an ajax call to a controller method (e.g. controller/getFilteredRows) that gets as input the selected row (could be its id) and based on some logic fetches all the required information and sends them back to the client encoded for example using JSON.
Now the client knows the rows it has to display, hence you can update your grid.

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