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)
Related
What I want: if the user reloads the page with his redirect to another page.
(Only when updating the page)
Example:
I'm on main/bla and reload the page and I'm redirected to the main/
window.onbeforeunload = function(e) {
$state.go('main');
};
Does not work for me.
There is a lot happening when you want to change states.
For one, it could trigger extra network activities such as resource download. There isn't enough time for angular to change states, change URL and go through the lifecycle of navigating routes.
some options:
Do the redirect after the refresh happens (save something in localstorage, cookies, ..)
Redirect manually, update document.location or similar
Check once if you are using proper injector in js controller or is there any other error on console.
Check for:
you have given proper state name $state.go('main'),it should defined in routing.
Should use injector $state in controller.
I am using angular factory to pass data from one form to another form.
Working fine, but when I refresh the page, data lost from the page.
How I can resolve this ?
I am using below code
angular.module('app')
.factory('SignupService',function() {
return {
first_name : ''
};
} );
and I am assigning value like this in form1.
SignupService.first_name = $scope.first_name ;
And getting value in form2 like this
function Signup2Ctrl($scope,$http,$location,$auth,$state, SignupService){
alert(SignupService.first_name);
});
How to resolve this or any other alternative to handle this.
Thanks in advance.
AngularJS is used to build single-page web applications (SPA). When you reload the page, the application goes into its initial state. If you want to preserve any data, you should use browser cookies, local storage, cache etc.
The whole idea of AngualrJS is not to reload the page. That what makes it more suitable for developing native apps where the user doesn't have the option to relaod the page in the way a browser provides.
There is a way to prevent the code from resetting when a user hits refresh. You would nee to implement something like this:
var windowElement = angular.element($window);
windowElement.on('beforeunload', function (event) {
// do whatever you want in here before the page unloads.
// the following line of code will prevent reload or navigating away.
event.preventDefault();
});
To use it, simply create a .run instance and implement it there. Have you read about the loading order of an AngularJS app? Read more about it here: AngularJS app.run() documentation?
You should also look into $routeprovider: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
If reloading is a necessary part of your app, maybe you could create some kind of reload button if using the ngRoute module?
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.
I have a, hopefully, simple question. I've built a small App with Ionic and AngularJS. There are two States, one of them is a tab containing a form. When submitted the form tab shouldn't be accessible anymore. I've tried to write a boolean variable in local storage and it works fine for me. Unfortunately when I submit the form I can still push the back button of ionic or the android hardwarebutton to go back to the form and submit again. I called a function via ng-init that switches the state before loading but this only works with refreshing the page, not at the state change.
How can I listen to a state change? Do you have a better solution?
It's quite easy actually, UI-router give you access to 3 differents state listener :
$rootScope.$on('$stateChangeStart',myFunc) -> fires when state is changing
$rootScope.$on('$stateChangeSuccess', myFunc) -> fires when state has changed successfully
$rootScope.$on('$stateChangeError', myFunc) -> fires when state change has failed
Then you can disallow the access to one page using the resolve attribute of your state by associating it to a promise. see doc
If the promise is resolved, access is granted else access is denied.
I am doing an only front end project with backbone.
And at one point I want to do the following :
A basic form with some input
the user submit the form
Show some cool graph with d3 or google graph based on the inputs of the user.
The problem is that I don't have any backend so I never save the inputs of the user, How can I change the view and still have the data of the form?
I was thinking about storing it temporary into localstorage but it's not really a good solution for perfs...
Thanks
Router creates a model instance
Router passes that model instance to the form view constructor options
Router binds event listener view.on('formComplete', this.storeModel)
Router renders & attaches form view
User fills out form view
Form view sets the data from the form into the model
Form view triggers route or event (like this.emit('formComplete', this.model);)
Router's storeModel handler function takes the same model instance, stores it as this.model temporarily on the router, and then navigates to the graph view.
In the graph view route handler method, router passes this.model it to the graph view contsructor options, render, attach
This is sort of using your router as an in-memory data cache, but since you have no back end, you need to store data somewhere.
Im also doing an one view web app with backbone.
I think the point of your problem is you really has only one page but load different views into this page. Not change to another page.
I suppose your app url is http://xxx.xxx.xxx/#first_view. and use backbone Router to change views
If you just want keep the data until user refresh browser. Just save them into a Global js variable. Once you use something like
window.location = Global.getBaseURL() + "#second_view" to change your view. And you actually load the "second_view" by ajax and put html into current page. You never lose your js variable.
If you want keep data even user refresh or go to another page. You have to use sessionStorage. Save data into JSON format and convert them back to js variable once you finish loading the new page.