We Keep Coding

Loose data on refresh page Angular js

I have an AngularJS app like this one:
http://next.plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview&preview
and the $scope data that I have, is from an API,
When the page first loaded I call to this API and I save the data that returned in the session,
Now I can't understand why when I refresh the page I Losing information and all the data,
How can I use the data dynamic that when I refresh the page I don't loos data?

First of all, are you using routing in your app? Here is simple example :
http://next.plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview&preview
With routing you do not need to refresh your page.
As to the problem itself (don't loss data after refresh):
if you want to keep your data even when you refresh your browser use localStorage. There're lots of handy localStorage angularJS modules to use - ex.
https://github.com/grevory/angular-local-storage
if you don't want to store data on the client side, you could request your API for the data you need to store each time your angular app is getting loaded. This data seems to be static, as you are storing it on client side and reuse then, so you could configure API endpoint to throw this data really fast.

Angular 2+ Service for getting application changes and uploading to server

I am working on an Angular 4 project and I'm a bit stuck on how to implement the following.
Steps:
User uses the application and things change on it
These changes are saved locally using localStorage
A Service listens for changes in the data and if there are changes it uploads the changes to the server.
My idea behind saving the data locally is that the user doesn't have to get involved on sending the data to the server and also if the serve was to go offline, the user can still continue working via the local data available.
My question is...Is this a good idea or are there better ways of doing this with Angular ?

Your idea is good, here are steps to implement it:
1、Create a storage service, e.g. StorageService, to save data in localStorage
2、Create a update service, e.g. UpdateService, to get data from localStorage and upload to server
3、In StorageService, every time the data changed, call UpdateService
4、In UpdateService, you can detect whether network is online or offline, and you probably want a lastUpdateTime field, to record the last time when you successfully update the data to server, so you can control the frequency of update

I suggest you to make an entry in the server first, if you do not have a network or your save call to server fails your local storage will never have the correct data. My suggestion will be,
User uses the application and things change on it,
A Service listens for changes in the data and if there are changes it uploads the changes to the server.
if above call succeed save it in your LocalStorage,
still if you wish to save the data I suggest you try to keep it away from the view logic.

Persist data in same window even if url changes

I have graph with data in welcome page like widget(/welcome). when the user clicks the graph the page change to /home/default and the same graph should be displayed along with some extra data which is populated by Ajax call. What I want is to persist the graph data from /welcome into /home/default page. I don't want the data to go controller and back to the /home/default page. Kindly suggest.

In a nutshell, you need to set some state for the user and then when the /home/default page is rendered, you need to check that state and make corresponding changes to the presentation of the page.
This can be done either server-side (in the rendering of the page) or client-side (via Javascript adding things to the page).
If you do this client-side, then the state can be stored in a cookie, in LocalStorage or in a query parameter in the URL when you redirect. Then, you place Javascript code into /home/default that checks that state and adds content to the page dynamically based on the state.
If you do this server-side, then the state can be stored in a cookie or in some server-side data store and then when the /hoome/default page is rendered, your server side page rendering process can check the state for this particular user and modify the rendering of the page to include the desired content.

You have a plethora of options. The best solution depends on how your application is currently implemented -- whether in a framework or not, with sessions or not, etc. The principle whatever method you choose is almost identical: store a value and then retrieve it later.
Single Page Application (SPA)
If you aren't already using a framework, I would urge you to consider migrating to one as tasks like these are made infinitely more elegant in their implementation.
Service / Data Store
If you are building an SPA then you may not have to consider any of the options below... so long as it doesn't matter if the data is lost if the user performs a 'real' navigation that cannot be intercepted by the framework (for example, refreshing the page).
In Angular you can maintain a temporary data store in the form of a service. Simply store the data and then pick it up later from another controller. Similar functionality can be achieved in all other popular SPA frameworks:
Angular
Ember
React
Local Storage
Local Storage is available in IE8 and above and has a really simple API.
Angular: angular-local-storage
React: react-local-storage
Ember: ember-local-storage-adapter
jQuery: jStorage
IndexedDB
If you're into the cutting edge and aren't tied down by browser support, consider using IndexedDB. I don't recommend using this unless you are wanting to persist large amounts of data remotely on the client's machine. (It really does have bad support at the moment.)
Angular: angular-indexed-db
React: ???
Ember: ember-indexeddb-adapter
jQuery: jquery-indexeddb
Cookies
If your application is inflexible then cookies will be the easiest and least time-consuming. However Local Storage may be a contender.
Angular: $cookie service
React: react-cookie
Ember: ???
jQuery: jquery-cookie

How can I write data to and update HTML5 cached web pages while working offline?

In the application I am writing, a user captures information about a person via an online form. When they have completed the form they save their work, repeating this process several times in a session. When they hit 'Save and End Session' they are returned a list of the several person instances they have just saved, all data being saved to a server.
I wish to replicate this functionality in an offline app. Using HTML5 I understand how to cache pages, and how store the JSON form data in localStorage using raw Javascript (or perhaps Angular.js cache).
But is it possible to dynamically update cached webpages with cached data while offline? how, for example, can I write the the cached form data to a cached copy of the list page, updating that page with the data just produced, all during the offline session?
I cannot find an answer to this one. All suggestions are much appreciated!

If I understood this correctly, you want to dynamically update the html view while offline.
If you are using Angular, this is pretty simple.
You just have to cache also the JS controller, not only the html file (set it in the cache.manifest). The page will have the same functionality as the online app then. But if you want to send the stored offline data back to the server when offline, you can write a simple code that will:
Save the parameter in localStorage, which will mark if the data was saved while running online/offline app (you can recognize onine/offline by sending AJAX request to an existing part of the app, which is not available offline (so not cached one))
When app runs then in online mode, it will collect all the data stored offline and send it to the server

How do you send payload data with initial request?

Lets say, for example, we have a page that has a table with list of users. I could render the HTML with the table of users, but that isn't very friendly with Angular. I can also AJAX back to the server for the data, but then I have to wait for the initial page to render and make an additional HTTP request, which adds additional delay.
Is there a way to send my payload data along with my initial request so I don't have to AJAX for the data and I can still use angular binding (e.g. ng-repeat)?

The only way to access server data without executing Javascript is to have the server include that data in the initial request for the web page. This would require using a server side language such as PHP, Ruby, or ASP.NET that can query the data, add it to your web page, and send the updated web page in it's inital http resonse.
However, this concept completely undermines the purpose of using a client side framework such as AngularJS. Angular wants to be in charge of your data access, and I would recommend letting it be. Angular doesn't know about Data that it didn't retrieve, so you are going to have to also dynamically modify your page scripts to tell Angular about the data that the server retrieved. This is all going down a dark road that you do not want to go down. you will simply be doing double work.
If your concern is that your users will be see a brief delay between the page load and the initial data loading, you even have the option to keep the screen blank until the initial data loads using things directives like ng-cloak and ng-bind. If you are concerned about the delays in retrieving data after the initial page load, remember that a full-page HTTP request and full page reload takes much longer than an ajax call that only updates a single part of your page.
If you don't want to be using Ajax calls, you don't want to be using AngularJS.