Detect OS, browser and device in AngularJS

  • It will tell us the os version and the browser version as well.
  • 3 thoughts on ” Detect OS, browser and device in AngularJS “
  • browser – Gives us the browser of the user.
  • device – Gives us the device of the user.
  • os – Gives us the operating system of the user.

This article shows how to easily detect entities such as os, browser and device in your angularjs applications using ng-device-detector.

@cipherTrick: Detect OS, browser and device in AngularJS

#AngularJS

In this lesson we will see how we can gracefully detect the Operating System, browser and device used by our user to browse our website.

Detecting browser is usually a bad smell and means that you are getting your hands dirty, however there are genuine cases where this can’t be avoided.

Detecting OS can be sometimes very important for example, if you are providing a download package or a software to your users, you would want to point them to the appropriate version depending on the OS.

Usually detecting these entities involves a bit of dirty JavaScript work, matching regex etc. but here we will be using an AngularJS library known as “ng-device-detector”, which will reduce our work significantly. It will tell us the os version and the browser version as well.

ngDeviceDetector is a library under the user name srfrnk, licensed as MIT. This library will help us detect the OS, browser and device in our AngularJS application with ease.

First thing you need to do is, grab the files required to detect our entities.  There are a couple of ways to do so.

$ bower install ng-device-detector

OR you can get them from the below links.

re-tree is a library that servers as regular expression engine. This library is required by ng-device-detector.

Include these two files into your app after angular.js.

app.js is our script file for the demo.

Next in your angular module inject ‘ng.deviceDetector‘ as a dependency to our app.

angular.module(‘myApp’,[“ng.deviceDetector”])

ng.deviceDetector provides us with ‘deviceDetector‘ service. Inject this into your controller. This service will contain all the data we would require to detect our entities.

Lets have a look at the demo app.

As you can see above in the code.

Below is the complete data provided by the deviceDetector service for your reference.

  “raw” : {

    “os” : {

      “windows” : true ,

      “mac” : false ,

      “ios” : false ,

      “android” : false ,

      “linux” : false ,

      “unix” : false ,

      “firefox-os” : false ,

      “chrome-os” : false ,

      “windows-phone” : false ,

      “ps4” : false ,

      “vita” : false ,

      “unknown” : false

    “browser” : {

      “chrome” : true ,

      “firefox” : false ,

      “safari” : true ,

      “opera” : false ,

      “ie” : false ,

      “ms-edge” : false ,

      “ps4” : false ,

      “vita” : false ,

      “unknown” : false

    “device” : {

      “android” : false ,

      “ipad” : false ,

      “iphone” : false ,

      “ipod” : false ,

      “blackberry” : false ,

      “firefox-os” : false ,

      “chrome-book” : false ,

      “windows-phone” : false ,

      “ps4” : false ,

      “vita” : false ,

      “unknown” : false

    “os_version” : {

      “windows-3-11” : false ,

      “windows-95” : false ,

      “windows-me” : false ,

      “windows-98” : false ,

      “windows-ce” : false ,

      “windows-2000” : false ,

      “windows-xp” : false ,

      “windows-server-2003” : false ,

      “windows-vista” : false ,

      “windows-7” : false ,

      “windows-8-1” : false ,

      “windows-8” : false ,

      “windows-10” : true ,

      “windows-phone-7-5” : false ,

      “windows-phone-10” : false ,

      “windows-nt-4-0” : false ,

      “unknown” : false

  “os” : “windows” ,

  “browser” : “chrome” ,

  “device” : “unknown” ,

  “os_version” : “windows-10” ,

Detecting entities such as os, browser and device can turn out to be a pain, this post showed us how we can achieve it in our angular applications with ease.

Detect OS, browser and device in AngularJS