How to detect browser using angularjs

Question

I am new to angularjs  How can I detect userAgent in angularjs  Is it possible to use that in controller  Tried something like below but no luck     var browserVersion   int   msie   d    exec lowercase navigator userAgent          1      I need to detect IE9 specifically

User · Answer

Browser sniffing should generally be avoided, feature detection is much better, but sometimes you have to do it. For instance in my case Windows 8 Tablets overlaps the browser window with a soft keyboard; Ridiculous I know, but sometimes you have to deal with reality.

So you would measure 'navigator.userAgent' as with regular JavaScript (Please don't sink into the habit of treating Angular as something distinct from JavaScript, use plain JavaScript if possible it will lead to less future refactoring).

However for testing you want to use injected objects rather than global ones. Since '$location' doesn't contain the userAgent the simple trick is to use '$window.location.userAgent'. You can now write tests that inject a $window stub with whatever userAgent you wan't to simulate.

I haven't used it for years, but Modernizr's a good source of code for checking features. https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059

User · Answer

There is a library ng-device-detector which makes detecting entities like browser  os easy   Here is tutorial that explains how to use this library  Detect OS  browser and device in AngularJS  ngDeviceDetector  You need to add  re-tree js and ng-device-detector js scripts into your html  Inject  ng deviceDetector  as dependency in your module   Then inject  deviceDetector  service provided by the library into your controller or factory where ever you want the data     deviceDetector  contains all data regarding browser  os and device

User · Answer

Why not use document documentMode only available under IE   var doc    window document  if    doc documentMode      if  doc documentMode     10          doc documentElement className      isIE isIE10         else if  doc documentMode     11          doc documentElement className      isIE isIE11            etc

User · Answer

So  you can declare more utilities for angular by create file with content  I follow RGraph Library    function window  angular  undefined    use strict       var agl   angular            var ua    navigator userAgent       agl ISFF       ua indexOf  Firefox      -1      agl ISOPERA    ua indexOf  Opera      -1      agl ISCHROME   ua indexOf  Chrome      -1      agl ISSAFARI   ua indexOf  Safari      -1  amp  amp   agl ISCHROME      agl ISWEBKIT   ua indexOf  WebKit      -1       agl ISIE     ua indexOf  Trident    gt  0    navigator userAgent indexOf  MSIE    gt  0      agl ISIE6    ua indexOf  MSIE 6    gt  0      agl ISIE7    ua indexOf  MSIE 7    gt  0      agl ISIE8    ua indexOf  MSIE 8    gt  0      agl ISIE9    ua indexOf  MSIE 9    gt  0      agl ISIE10   ua indexOf  MSIE 10    gt  0      agl ISOLD    agl ISIE6    agl ISIE7    agl ISIE8     MUST be here      agl ISIE11UP   ua indexOf  MSIE      -1  amp  amp  ua indexOf  Trident    gt  0      agl ISIE10UP   agl ISIE10    agl ISIE11UP      agl ISIE9UP    agl ISIE9    agl ISIE10UP      window  window angular     after that  in your function use can use it like  function SampleController  scope        scope click   function              if angular ISCHROME            alert  is chrome

User · Answer

Not sure why you specify that it has to be within Angular  It s easily accomplished through JavaScript  Look at the navigator object   Just open up your console and inspect navigator  It seems what you re specifically looking for is  userAgent or  appVersion    I don t have IE9 installed  but you could try this following code     Detect if IE 9 if navigator appVersion indexOf  MSIE 9     -1

User · Answer

You can easily use the  ng-device-detector  module    https   github com srfrnk ng-device-detector  var app   angular module  myapp     ng deviceDetector     app controller  DeviceCtrl      scope   deviceDetector  function  scope deviceDetector          console log  browser     deviceDetector browser         console log  browser version     deviceDetector browser version         console log  device     deviceDetector device

User · Answer

you should use conditional comments   lt  -- if IE 9  gt   lt script type  text javascript  gt      window isIE9   true   lt  script gt   lt   endif -- gt    You can then check for  window isIE9 in your controllers

User · Answer

Detection ie9      var userAgent  ieReg  ie    userAgent    window navigator userAgent    ieReg    msie Trident  rv     11   gi    ie   ieReg test userAgent    if  ie          js for ie9 10 and 11

User · Answer

I modified the above technique which was close to what I wanted for angular and turned it into a service  -   I included ie9 because I was having some issues in my angularjs app  but could be something I m doing  so feel free to take it out   angular module  myModule   service  browserDetectionService   function       return   isCompatible  function         var browserInfo   navigator userAgent    var browserFlags           browserFlags ISFF   browserInfo indexOf  Firefox      -1    browserFlags ISOPERA   browserInfo indexOf  Opera      -1    browserFlags ISCHROME   browserInfo indexOf  Chrome      -1    browserFlags ISSAFARI   browserInfo indexOf  Safari      -1  amp  amp   browserFlags ISCHROME    browserFlags ISWEBKIT   browserInfo indexOf  WebKit      -1     browserFlags ISIE   browserInfo indexOf  Trident    gt  0    navigator userAgent indexOf  MSIE    gt  0    browserFlags ISIE6   browserInfo indexOf  MSIE 6    gt  0    browserFlags ISIE7   browserInfo indexOf  MSIE 7    gt  0    browserFlags ISIE8   browserInfo indexOf  MSIE 8    gt  0    browserFlags ISIE9   browserInfo indexOf  MSIE 9    gt  0    browserFlags ISIE10   browserInfo indexOf  MSIE 10    gt  0    browserFlags ISOLD   browserFlags ISIE6    browserFlags ISIE7    browserFlags ISIE8    browserFlags ISIE9     MUST be here    browserFlags ISIE11UP   browserInfo indexOf  MSIE      -1  amp  amp  browserInfo indexOf  Trident    gt  0    browserFlags ISIE10UP   browserFlags ISIE10    browserFlags ISIE11UP    browserFlags ISIE9UP   browserFlags ISIE9    browserFlags ISIE10UP     return  browserFlags ISOLD

User · Answer

Angular library uses document documentMode to identify IE   It holds major version number for IE  or NaN undefined if User Agent is not IE         documentMode is an IE-only property   http   msdn microsoft com en-us library ie cc196988 v vs 85  aspx    var msie   document documentMode    https   github com angular angular js blob v1 5 0 src Angular js L167-L171  Example with  document  angular wrapper for window document      var msie   document documentMode  var msie    document 0  documentMode     if is IE  documentMode contains IE version  if  msie         IE logic here    if  msie     9           IE 9 logic here

User · Answer

Like Eliran Malka asked  why do you need to check for IE 9   Detecting browser make and version is generally a bad smell  This generally means that you there is a bigger problem with the code if you need JavaScript to detect specific versions of browser    There are genuine cases where a feature won t work  like say WebSockets isn t supported in IE 8 or 9  This should be solved by checking for WebSocket support  and applying a polyfill if there is no native support   This should be done with a library like Modernizr    That being said  you can easily create service that would return the browser  There are valid cases where a feature exists in a browser but the implementation is outdated or broken  Modernizr is not appropriate for these cases    app service  browser      window   function  window          return function               var userAgent    window navigator userAgent           var browsers    chrome   chrome i  safari   safari i  firefox   firefox i  ie   internet explorer i            for var key in browsers                if  browsers key  test userAgent                     return key                                  return  unknown                 Fixed typo broswers  Note  This is just an example of how to create a service in angular that will sniff the userAgent string  This is just a code example that is not expected to work in production and report all browsers in all situations   UPDATE  It is probably best to use a third party library like https   github com ded bowser or https   github com darcyclarke Detect js  These libs place an object on the window named bowser or detect respectively    You can then expose this to the Angular IoC Container like this    angular module  yourModule   value  bowser   bowser     Or   detectFactory  inject      window    function detectFactory  window        return detect parse  window navigator userAgent      angular module  yourModule   factory  detect   detectFactory     You would then inject one of these the usual way  and use the API provided by the lib  If you choose to use another lib that instead uses a constructor method  you would create a factory that instantiates it   function someLibFactory         return new SomeLib      angular module  yourModule   factory  someLib   someLibFactory     You would then inject this into your controllers and services the normal way   If the library you are injecting does not exactly match your requirements  you may want to employ the Adapter Pattern where you create a class constructor with the exact methods you need   In this example we just need to test for IE 9  and we are going to use the bowser lib above    BrowserAdapter  inject     bowser       bring in lib function BrowserAdapter bowser        this bowser   bowser     BrowserAdapter prototype isIe9   function         return this bowser msie  amp  amp  this browser version    9     angular module  yourModule   service  browserAdapter   BrowserAdapter     Now in a controller or service you can inject the browserAdapter and just do if  browserAdapter isIe9       do something    If later you wanted to use detect instead of bowser  the changes in your code would be isolated to the BrowserAdapter    UPDATE  In reality these values never change  IF you load the page in IE 9 it will never become Chrome 44  So instead of registering the BrowserAdapter as a service  just put the result in a value or constant   angular module  app   value  isIe9   broswerAdapter isIe9

[angularjs] How to detect browser using angularjs?

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope

Examples related to angular-ui