How do I check for browser support for AngularJS? - angularjs

I have to check if the browser being used supports my site which uses AngularJS version 1.2.12. The goal is to show a message saying to 'update/change your browser' for old versions of Chrome/Safari/IE. Feature detection is recommended in general but for issues like this: https://github.com/angular/angular.js/issues/4749 where select elements don't refresh their values, as well as some other IE8 issues, feature detection doesn't seem relevant so I'm planning to use:
<!--[if IE]>
less than IE10
<![endif]-->
Is there an AngularJS way of detecting support for its features? Should I be checking for old versions of Chrome/Safari at all?

In our project we use html conditional comment to detect which version of IE is running. Something among the lines:
<!--[if IE 8]><html class="lt-ie9"><![endif]-->
You can also use Modernizr which has feature detection.
In terms of other browsers you should be fine, since they update themselves regularly and we haven't find any particular issue related only to one specific version.

Related

Does end of support of AngularJS mean applications will stop working in Chrome?

I understand that AngularJS will stop being supported in July 2021; after that date, some changes to jQuery etc. might cause AngularJS applications to stop working and AngularJS will not be updated.
I have an AngularJS-based application running in an isolated environment with Internet connectivity normally turned off, i.e. the application doesn't require Internet connection since all AngularJS, jQuery and other JS libraries are embedded in the application. Internet is periodically turned on just to update the Chrome browser used to run the application.
Let's assume that after the end of support period for AngularJS I keep all AngularJS, jQuery and other JS libraries unchanged, but I do allow Chrome browser to periodically update itself.
Question: in such scenario, is there a risk that my application will stop working after updating Chrome, so I should consider freezing Chrome version as well? Or would updating only the browser not cause any changes to the application behavior?
Browsers don't impose certain client-side libraries or their versions on the users. If you don't upgrade any libraries in your app, you should be just fine with your current lib setup. Your app may become vulnerable if some new bugs are found in the outdated libraries, but apart from that, I wouldn't worry too much.
jQuery that you've explicitly pointed out shouldn't be a problem, if you stay within the minor versions and not upgrade to new major version. But even though, the new major versions may still have breaking changes non-related to the functionality you use within jQuery. Check changelogs of those specific new versions. But if your app isn't critical, you can just stay at the versions you're using now if they satisfy the requirements of your app.

Browser compatibility of angular.js and angular-ui bootstrap

I trying to decide whether I could to use angular.js (and anguar-ui-bootstrap) in my project.
The web application should work with any reasonably modern browser, I was quite surprised that the right on the angular-ui-bootstrap site, after clicking on "create a build" button the server responds:
Your current browser doesn't support creating custom builds. Please
take a second to upgrade to a more modern browser (other than Safari).
with a link to http://browsehappy.com, where my Safari (v.8) is listed, but the angular-ui-bootstrap explicitly excludes it.
In the FAQ for the angular.js is:
AngularJS is 100% JavaScript, 100% client-side and compatible with
both desktop and mobile browsers.
also the bootstrap 3 itself is compatible too.
Since I am a complete novice to angular.js, just downloaded and trying to learn it, but honestly, I do not want to waste several days/weeks with learning to discover: it doesn't supports Safari fully. The support of all reasonably modern browsers is crucial for the project.
Therefore the questions are:
Supports angular-ui-boostrap any reasonable modern browser fully, e.g. for any functionality?
If not fully, which functions / modules / parts are "problematic"?
e.g. the "build-problem" is the angular.js's "feature" ?
The angular-ui-bootstrap build modal window kicks off a function called isOldBrowser. Looking through their repo you can find that function under misc/demo/assets/app.js. Instead of looking for specific browsers it's looking for the browser to be able to execute specific functions or return certain results. Presumably, the checks would be a very generalized way for them to make sure you have an appropriate browser.
Having said that, Bootstrap lists pretty much every browser as being supported with only a few exceptions (like Safari on Windows) plus a couple of bugs each. Angular has a similar statement in that they support all current browsers (IE9 and up). Either way you should be safe using any modern browser.

AngularJS 1.3 and IE8

So I know that AngularJS dropped support for IE8. I'd like to learn, whether this means that they won't simply test in IE8, or did they introduce some features that simply break in IE8.
Did anyone actually succeeded in setting up Angular 1.3+ application on IE8? What kind of approaches/shims are needed (modernir, es5-shims, respond.js, others?)
I have Angular 1.3 working with IE8.
It requires jQuery, a couple of shims and one source code change to Angular. I'm maintaining builds of Angular with a lot of the shims baked in and instructions on what else to include here:
https://github.com/fergaldoyle/angular.js-ie8-builds
I can't get the unit tests running properly with IE8 so can't confirm 100% compatibility, but using a broad smoke test I can confirm every feature I've ever used with Angular works fine in IE8 + 1.3
It simply means that they've stopped testing for anything beyond 1.2.x, which enables them to "add more exciting features to Angular faster, decrease Angular's support burden, and cut [their] build time in half, while affecting only a very small proportion of users."
They're not necessarily removing the hacks from Angular that made IE8 work but there's no guarantee that changes in anything after 1.2.x won't break an application running on IE8 since they've stopped supporting it and addressing any issues that are solely related to it.
The above was what they said in a post about a year ago, so it might very well be the case that there are certain features that break today. With that said, your safest bet would be to work with 1.2.x, unless you want to use 1.3.x and test it yourself.
References:
https://blog.angularjs.org/2013/12/angularjs-13-new-release-approaches.html#!http://angularjs.blogspot.com/2013/12/angularjs-13-new-release-approaches.html
https://docs.angularjs.org/guide/ie
After trying it on my own - no, Angular 1.3 simply won't run on IE8. It's not a matter of shims, or other libraries, or some hacks. It just won't work at all.

AngularJS and quirks mode: blank screen on IE8+

I'm working on an Angular project that will be included in a HTML page I don't have control on.
Actually I only have access to what is inside the <body> element.
There are many constraints which are not the easiest to deal with:
1- I can't change the doctype:
2- I can't remove this meta tag:
3- The app has to load an XML file
I managed to overcome points 1 and 3 but point 2 gives me a headache !
Here is the error I get when I test on IE8+ (it works fine on IE7 and other browsers):
[$sce:iequirks] http://errors.angularjs.org/1.2.12/$sce/iequirks
IE8 in quirks mode is unsupported
error in component $sce
Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
I found many solutions on forums but no one has worked so far...
Especially hoped that disabling $sceProvider (code below) would make the app work on IE8+ but it didn't:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);`
});
I even tried to add <!doctype html> to the top of my HTML document, which I am not allowed to but which I did just for the test, and it doesn't solve the problem.
Any help or suggestions greatly appreciated cause I'm really stuck right now...
Thanks
Got it !!
I simply needed to give the name of my app instead of silly "ie7support" in the code below:
angular.module('ie7support', []).config(function($sceProvider) {
// Completely disable SCE to support IE7.
$sceProvider.enabled(false);
});
Found thanks to a deeper look at this article:
http://docs.angularjs.org/api/ng.$sce
Hope it can help some of you !
IE in quirks mode is not supported by AngularJS
Thanks for your answer Adam but according to these messages, disabling $sce completely helps AngularJS to support IE in quirks mode...
https://github.com/angular/angular.js/issues/3633
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode

How to make new Zurb Foundation support for IE 7+?

I recently build an responsive website. I use Zurb Foundation because some advice and article its the best solution for make responsive website more efficient. But the problem, the new version of Foundation don't support for IE 7+, as you can see here, but I want my website support for all of IE version. Some suggest advice to use old Foundation (i.e. vers 3). But I think the newest version is the best.
My question, any solution to make new Foundation (vers. 4) support for IE?
I need the advice because I'm stack here. Thank you
The problem with IE7 and IE8 is that they don't have built in support for media queries.
There are some options which may help you though, cross-browser polyfills that add media query support to old browsers.
The two most popular are respond.js and css3-mediaqueries.js . I've had success with both.
In the head of your page, you test the browser and load one of these scripts if necessary.
Ways I've done this in the past are either with conditional comments:
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="path-to/respond.js"></script>
<![endif]-->
or by using modernizr
Modernizr.load([
{
// The test: does the browser understand Media Queries?
test : Modernizr.mq('only all'),
// If not, load the respond.js file
nope : '/js/respond.js'
}
]);
Both methods are easy enough to try, and even if though don't help you this specific case, you'll probably get the opportunity to try them again on another site.
Good luck!
I wrote this http://justthisguy.co.uk/responsive-sass-and-ie/ that looks at using bootstrap and having sass generate an ie7 stylesheet that defaults to the desktop view. I'm going to work on a foundation version of it at some point. It results in some duplication of css rules but something like https://github.com/addyosmani/grunt-uncss could be used to remove that duplication

Resources