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.
Related
I'm trying to integrate Hotjar with an admin panel.
The way it currently works is some sort of SPA without page loads and neither URL changes.
It all happens under /index.php and then when we need to change a page, just send an AJAX request to load it's content.
From checking the documentation, Hotjar seems compatible with SPA's but only when there's a change in the URL (either query string or hash).
Is there a way to trigger in JS a page change to a page name (i.e. Main Page) ?
I've tried
hj('vpv', 'Main Page')
But the output seems weird
url: "http://mydomain.comTest Page"
Thanks.
You can track your changes manually by adding additional JavaScript after your AJAX calls.
Documentation:
To Manually Issue a State Change
hj('stateChange', 'some/relative/path');
Example:
Imaging that you have a SPA with base URL http://example.com/ and you want to track the main page and a page that gets dynamically loaded with AJAX once you click some button.
In order to do that, you would need to:
1) In your Hotjar account, create two heatmaps. For the main page, you can use the base URL http://example.com/. For the page that is going to be loaded dynamically, you can put a virtual URL, e.g. http://example.com/my-dynamic-page, which will be used only for recording and will not need to exist in your SPA.
2) In the JavaScript of your application, add the state change code after the AJAX call that will dynamically load the page.
You need to use the virtual URL that you defined in the previous step to let Hotjar know that this is a new page and you want to track it separately:
hj('stateChange', 'http://example.com/my-dynamic-page');
I have two basic pages with the urls
http://localhost:8000/page-a and
http://localhost:8000/page-b.
I'm using html5 history api and following this tutorial.
The only difference is that I add the api endpoint of the data, like
http://localhost:8000/api/page-a and
http://localhost:8000/api/page-b, in pushState().
I can easily go back and forth in history but when reloading the page and go back and forth, window.popstate does not trigger anymore. Rather, it directly navigates to page-a and page-b as it says in the console.
In the demo, I reloaded the pages but it still works fine. Is this because the data has to be fetched with AJAX? (but in the tutorial it says the AJAX is fine)
EDIT
I forgot to mention that the pages are created dynamically (with Django). Is it because of the dynamic nature of the pages?
SOLVED
I should have added the url of the state like http://localhost:8000/api/page-a/. On page reload, Django always resolves the url http://localhost:8000/page-a to http://localhost:8000/page-a/ so when I click the back button the onpopstate is never triggered. It was just a '/' and costed me like two days.
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 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
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);
};