AngularJS: How to change the path after refresh the page - javascript

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.

Related

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)

Angular factory data lost after refresh

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?

Redirect from outside Angular to Angular route

I have a need to redirect from a page not using Angular to a page that does use Angular. It seems like it should work, but upon redirection Angular does not load, the route doesn't get processed and I just get essentially a blank page.
I am just calling:
window.location.href = '/#/myroute';
The URL bar appears as https://myapp/#/myroute which is what I'm expecting. When I refresh it works exactly as it's supposed to, but the automatic redirection is not working.
I tried adding window.location.reload(); to my script after the location change, but it just caused an infinite loop.

How can I force Angular to NOT cache a page?

I was told by an old coworker that there's a way to force Angular controller to not cache, and so it'll get the latest data everytime. I googled and I cannot find the command.. Is there a way to force caching with Angular? I'm also using Angular UI-Router.
EDIT:
A description of my problem is this. I'll be on a certain page of my webpage. Then I click on a button which hits my backend, and if the cookie has expired, it will redirect to the login page. Once I log in and go back to the page I was originally at, it seems to cache the login page and it'll show the login page instead of the original page that I was at..
The only way to fix it will for me to hard refresh with F5.. that's why I'm trying to find a way to force Angular to not cache.
You can clear cache after the event $viewContentLoaded is raised :
myApp.run(function($rootScope, $templateCache) {
$rootScope.$on('$viewContentLoaded', function() {
$templateCache.removeAll();
});
});
$templateCache is service where templates are cached when called the first time.
Read more on $viewContentLoaded

Ember router resume on reload

I have an ember.js router based application with an interesting quirk. Since the router documentation is rather sparse, I'm not sure if this is a feature or a bug or an un-intended consequence of some of my code elsewhere.
When I reload the page containing the app in my browser, the App jumps to the route of where I last was. I have the routes serialized as a hash. So an example would be I'm on app.html#/users/1/details and I delete the hash and add a random query variable app.html?reload=randomnumber and load the page. As soon as ember loads, it is adding the #/users/1/details back to that address.
Is this a feature/consequence of ember, or is it some junk that I wrote. I haven't found anything that I wrote that could be causing this so far.
If it is an ember feature, is there a way to disable it?
What are you calling "reload", exactly?
Ember cannot keep any state in your browser when route is serialized using a hash. It has nothing to see with Ember: when reloading the page, the whole state is lost, and reset according to requested url returned content initializations.
Nevertheless, when a hash is present, it is used by Ember to reset the router's state.
So what I would suspect is you are still reloading the URL .../app.html#/users/1/details.
Did you take a look at your Network history, in the developer tools (or equivalent)?
The first item should be a GET request, and it will indicate the effective requested URL and the hash if any.

Categories