browser message display if angular cannot load - angularjs

In some browsers (ex ie7) where angular is not working I want to display a message telling the user to have his browser updated or use another one.
The way I am doing this is
<div ng-if="false">Browser not supported</div>
If the angular cannot render then the ng-if will not be processed so the div is displayed.
This is also causing a flicker when testing for pages with protractor because the protractor is going from page to page very fast.
My question is: Does anyone have a better solution of treating this kind of situation?

Related

Browser reloads react app when back button is pressed

I have a simple react app, to get to this app, a user clicks an anchor tag from another page. This is . Let's say this page is http://localhost/index.html
It redirects fine to the react app. Let's say it's on http://localhost/react/simple_app. In this react app, I use React Router, which has a catch all if none of the route matches. It will simply render text "Page Not Found".
When I click back button to get to index.html, both Chrome and Firefox will reload simple_app, WITH the url set to http://localhost/index.html. Obviously this will make simple_app to render "Page Not Found", as the route http://localhost/index.html is not defined in its routes. Once that rendered, the browser will immediately renders the previous page. So on this action the user will see the correctly rendered previous page. Everything seems to be pretty minor so far, just a bit of a flicker when "Page Not Found" briefly rendered then it quickly re renders index.html.
What is not fine is, if I then press "Forward" page on the browser, it will NOT re-render simple_app again. It will simply shows "Page Not Found". My suspicion on this is because briefly it has rendered it prior to moving "backwards" (with the wrong URL), hence browser will load it from cache.
Tried on firefox and chrome, with reactjs. Although this behaviour can be replicated with any JS, but specifically problematic with react router.
Also tried, if I type in the url http://localhost/simple_app, if i click back, it won't do the funky reloading with the wrong URL.
Not sure if any good solution to prevent this from happening.
To help everyone who got here looking for an answer, after a bit of digging and a bit of luck, I found the issue rooted in a library (ruby gem) we used called turbolinks. https://github.com/turbolinks/turbolinks.
This gem, injects javascripts which intercepts various navigation API such as anchor tag and browser back and forward so that it can make as our native application behaves like a Single Page App (without reloads).
So if you encountered similar behaviour, you may not be using Ruby, but check if you are using library that behaves similar to Ruby's Turbolinks. Hope this helps.

Detect reload browser alert on angular

sometimes on angularJS js, I have got "reload" alert from the browser with the message "are you sure you want to reload the page"?
I am using model but its happen also if I'm not opening the modals, and also I am using ui-notification maybe it's related to them
how can I find or debug it and disable it at all?

AngularJS window does not render (blank page) but resizing window renders it

I have this weird issue with my angular app. It doesn't happen every time but I've been able to consistently reproduce it if I click to it as quickly as I can as soon as my angularjs app loads.
Basically my right pane directive will sometimes render a blank page. This page however appears when I resize the browser window a little bit.
I'm not even sure where to begin looking to resolve this bug. I tried messing around with $timeout and $scope.$apply but it didn't seem to do anything.
Has anyone seen anything like this before and if so, how did you resolve it?
Note the directive I use does use ng-include with a value that is dynamically generated from the custom directive's associated controller.
P.S. Another oddity, if I move my mouse over the allow main dock then it loads the page too. (I assume it's doing an unfocus action on the browser window.) I wanted to see if this was a browser specific issue because of this. Looks like it's only Chrome where this is a problem, as I can't reproduce the problem on firefox.
Same problem caused by CSS - display: table, found a solution by changing it to display: inline-block, so check if you have a such.

Angular Material form scrolls down on page load

I created a long form using Angular Material. Weird thing is that instead of the page displaying normally it starts off midway through the form.
Is this something my browser is doing (Perhaps it thinks I left off at a certain point last time)?
Not sure how to force the page to load normally and start from the top.
Has anyone encountered this before?
I was able to track down the issue and it was the md-autocomplete field causing the page to scroll down. To fix this I added md-autofocus="false" in the md-autocomplete field and now it loads normally.

AngularJS $scope Not Updating in Safari Until Force Resize

Quick Video Of Issue: DropBox Share Link
Description:
I have been experiencing some weird behavior from Safari when rendering content I fetch using restangular in <ion-content> tags.
As is seen in the video, the content is pulled - as logged in the console, however it only renders in Safari when I re-adjust the screen size. On the other hand, in Chrome, this renders without an issue.
Dependencies Installed:
restangular
ui-router
Anyone have an idea of what might be causing this behavior?! Thanks

Resources