Hi I am working on web application using Angularjs. Currently I have a feature to save the data entered by the user.By clicking on the save button we are sending some data through service call Now there was change in the requirement. The data needs to save automatically when ever we crawl to next page or of session ended. Is there any way make service call automatically. I thought of with setInterval but that is not the correct way I think. Kindly suggest some better way of implementation.
In case of page movement, save it when the controller is destroyed
$scope.$on('$destroy', function something() {
yourService.save();
});
Related
I tried to google the following question, but nothing came up (which is super weird I need to).
What is an Agular app lifetime in a browser?
Or to rephrase when a user opens an Angular website, the app instances in the browser and stays live until the user leaves the website or closes the browser or?
On the separate note is it better to use a service for holding global variables (e.g. logged user name) or $rootScope?
Thanks!
What is an Agular app lifetime in a browser?
The angular app persists while that particular tab/site is open. If you navigate away from it and then back to it, for all intents and purposes, that's a fresh instance of the application. You could mimic a persistent session but that would entail a custom implementation on your part.
Here is a post on preserving data on a refresh of the application that you might be interested in - AngualrJS: sustaining data on html refresh
On the separate note is it better to use a service for holding global variables (e.g. logged user name) or $rootScope?
This is well documented and you can find myriad sources both here on SO as well as the internet, but it's better to use an angular service to share data among various controllers. It's not recommended that you pollute the $rootScope if you can avoid it.
Here is the same question asked on SO with solutions:
angular set a variable accessible to any scope
How to use variables from a controller in another controller in AngularJS
If you use angular's routing or another way to load views that doesn't reload a page, then an angular application will stay active until you leave the page (closing or refreshing).
Every time you load a page through angular its controller's data is in its initial state so any modification to a controller's data will get lost when you change page (unless you persist it somewhere, that is)
Regarding your second question, the best way should be to get a user's data after every page change (to check if the user is still logged in. Saving a user's data client side without checking if it's still valid might be a security issue). But in any case, a service is a better way to store data than using rootScope
Hello can any one please tell me how to send on form data to another by clicking submit button using angular JS.
There are three ways to do that.
If you are using SPA flow for your website, you can make a service for data that are to be shared among pages. Redirection will only change the hash value of URL and landing page will still have those data from service.
Second is to use the hash value for data as lets say that you are redirecting from baseURL/test1 to baseURL/test2 so instead of redirecting to baseURL/test2, you can redirect to baseURL/test2#/data=* , * representing the data. The redirection will still happen but now you can also get the data.
Third is to use local storage or webSQL ( although limited browser support for webSQL), to save the data and then retrieve back on the next page.
While I will stick to the SPA flow for my angular website and use a service to pass on the data. There is also a way to assign data in $rootScope but that is just not a good practice to pass on data from one page to another.
I am using with ui-route by the way
But I want to create something useful for all the site
That every time there is a request to the server
the icon will appear
You can do this a number of ways. Write an angular service that you call inside every request that sets a variable to true when a request goes out, and false when the response comes back. Then attach an ng-show to an element with the icon set to the variable.
Also you can look into the $http interceptors, which might prove useful as then you would not have to call the service for every request manually. Downside, it would trigger on every request which may not be the desired effect.
When polling a model (object) or pushing a model from a RESTful API to AngularJS via xSockets the data in input-fields is overwritten.
Let's say I edit the first name of a user and while I edit the user xSockets or the timed polling using the $interval to refresh the model, is writing over the changes I have made to the first name before I had a chance to save.
How can I push or poll a model into the view without overwriting the input-field as I am editing?
Your information is a bit limited, but assuming that I understand the question correctly, you have two options.
You can disable realtime data refreshing on the edit page (I wouldn't let my app continuously refresh data where I am supposed to be providing input anyway).
You could add a change listener on your inputs that tells xSockets to not refresh the data on that field again until you have submitted the form.
Again, I'm not entirely sure what your situation is without seeing any code, but hopefully this helps.
I'm developing angular web app, I have this doubt that whether it's possible to separate UI from controller absolutely clean?
I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages.
So I'm thinking I have to call certain api of UI framework to notify the user either with a popup or some kind of toast. But doing that, doesn't it mean I'm embedding UI code into my controller logic? Isn't that the opposite of clean separation between UI and controller?
If I want to switch to another UI framework, that means I need to alter my controller code as well.
I'm a newbie of web app, hope someone can clarify my doubts.
What will you do?
I have a controller method which send request to server to retrieve data. If there's some error occurs, I need to notify the user with some friendly messages. So I'm thinking I have to call certain api of UI framework
You don't necessarily need to do this. In your UI, you can have HTML (UI code) that shows the user the problem. Using ng-if, this UI code is hidden from the user. If you controller detects a load failure, it can then set a value on the controller that will do the following
Cause the UI code to display
Optionally, set the display information in the UI code
<div ng-if="displayError">{{errorMsg}}</div>
Then, in your controller, something like this:
MyService.getData().then(
function(responseData) {
$scope.goodData = responseData;
},
function(failure) {
$scope.displayError = true;
$scope.errorMsg = "Failed to Retrieve Data"
}
);