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
Related
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)
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 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.
I have an app which uses AngularJS for some of its newer pages, and legacy server-side generated templates on other pages. When a person navigates from an Angular page to a server-side templated page, then uses the browser back button to return to the Angular page, none of the JavaScript responsible for making Angular page runs. This leaves the Angular page in a bad state.
I thought that the browser's bfcache would retain the state of the page just as it was when the user navigated out. However apparently I don't understand how bfcache works, it seems to do nothing except put back superficial HTML template code.
The app does not use the $location service, since I don't want to make Angular responsible for app-wide routing (yet): it would be too invasive to existing legacy code.
In any case, the problem should be exactly the same if an Angular app has a link to an external site: user clicks the link, visits the external site, then clicks the back button to a broken Angular page.
What am I missing to make this case work?
It would be nice to avoid gross kludges with checking some hidden state and issuing a broad location.reload() at the very beginning of all JS execution, but I don't mind forcing controller reinstantiation.
In a single page application(SPA) with the routings properly configure you can use $routeChangeSucess to track the route changes like this:
In your MainController:
scope.history = [];
$scope.$on('$routeChangeSuccess', function (event, current, previous) {
//this is how your track of the navigation history
$scope.history.push($location.$$path);
});
///Your go back code function can works something similar to this
$scope.goBack = function(){
var prevUrl = $scope.history.length > 1 ? $scope.history.splice(-2)[0] : "/";
$location.path(prevUrl);
};