¿Cómo detectar el navegador usando angularjs?

Soy nuevo en angularjs. ¿Cómo puedo detectar userAgent en angularjs? ¿Es posible usar eso en el controlador? ¡Probé algo como abajo pero sin suerte!

var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]); 

¡Necesito detectar IE9 específicamente!

Como preguntó Eliran Malka, ¿por qué necesitas comprobar IE 9?

La detección de la marca y la versión del navegador generalmente es un mal olor. Esto generalmente significa que hay un problema mayor con el código si necesita JavaScript para detectar versiones específicas del navegador.

Hay casos genuinos en los que una característica no funcionará, como por ejemplo, WebSockets no es compatible con IE 8 o 9. Esto se debe resolver buscando compatibilidad con WebSocket y aplicando un polyfill si no hay soporte nativo.

Esto debe hacerse con una biblioteca como Modernizr.

Dicho esto, puede crear fácilmente un servicio que devuelva el navegador. Existen casos válidos en los que existe una función en un navegador pero la implementación está desactualizada o rota. Modernizr no es apropiado para estos casos.

 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'; } }]); 

Corregidos errores tipográficos

Nota: Este es solo un ejemplo de cómo crear un servicio en angular que husmeará la cadena userAgent. Este es solo un ejemplo de código que no se espera que funcione en la producción e informe a todos los navegadores en todas las situaciones.

ACTUALIZAR

Probablemente sea mejor usar una biblioteca de terceros como https://github.com/ded/bowser o https://github.com/darcyclarke/Detect.js . Estas libs colocan un objeto en la window denominada bowser o detectan respectivamente.

A continuación, puede exponer esto al Angular IoC Container esta manera:

 angular.module('yourModule').value('bowser', bowser); 

O

 detectFactory.$inject = ['$window']; function detectFactory($window) { return detect.parse($window.navigator.userAgent); } angular.module('yourModule').factory('detect', detectFactory); 

Luego, inyectaría uno de estos de la forma habitual y usaría la API proporcionada por lib. Si elige usar otra lib que en su lugar utiliza un método de constructor, creará una fábrica que la ejemplifique:

 function someLibFactory() { return new SomeLib(); } angular.module('yourModule').factory('someLib', someLibFactory); 

Luego, inyecta esto en sus controladores y servicios de la manera normal.

Si la biblioteca que está inyectando no coincide exactamente con sus requisitos, puede utilizar el Adapter Pattern donde crea una clase / constructor con los métodos exactos que necesita.

En este ejemplo, solo tenemos que probar IE 9, y vamos a usar la bowser anterior.

 BrowserAdapter.$inject = ['bowser']; // bring in lib function BrowserAdapter(bowser) { this.bowser = bowser; } BrowserAdapter.prototype.isIe9 = function() { return this.bowser.msie && this.browser.version == 9; } angular.module('yourModule').service('browserAdapter', BrowserAdapter); 

Ahora, en un controlador o servicio, puede inyectar el browserAdapter y simplemente hacer if (browserAdapter.isIe9) { // do something }

Si más adelante quisiste usar detectar en lugar de bowser, los cambios en tu código se verían aislados en BrowserAdapter.

ACTUALIZAR

En realidad, estos valores nunca cambian. SI carga la página en IE 9 nunca se convertirá en Chrome 44. Por lo tanto, en lugar de registrar BrowserAdapter como un servicio, simplemente coloque el resultado en un value o constant .

 angular.module('app').value('isIe9', broswerAdapter.isIe9); 

La biblioteca angular usa document.documentMode para identificar IE. Tiene el número de versión principal para IE, o NaN / undefined si User Agent no es 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

Ejemplo con $ document (contenedor angular para 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 } } 

deberías usar comentarios condicionales

  

Luego puede verificar $ window.isIE9 en sus controladores.

No estoy seguro de por qué especifica que debe estar dentro de Angular. Se logra fácilmente a través de JavaScript. Mira el objeto navigator .

Simplemente abra su consola e inspeccione el navigator . Parece que lo que estás buscando específicamente es .userAgent o .appVersion .

No tengo IE9 instalado, pero podrías probar este código siguiente

 //Detect if IE 9 if(navigator.appVersion.indexOf("MSIE 9.")!=-1) 

Puede usar fácilmente el módulo “ng-device-detector”.

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); }]); 

Entonces, puedes declarar más utilidades para angular creando un archivo con contenido (sigo 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 && !agl.ISCHROME; agl.ISWEBKIT = ua.indexOf('WebKit') != -1; agl.ISIE = ua.indexOf('Trident') > 0 || navigator.userAgent.indexOf('MSIE') > 0; agl.ISIE6 = ua.indexOf('MSIE 6') > 0; agl.ISIE7 = ua.indexOf('MSIE 7') > 0; agl.ISIE8 = ua.indexOf('MSIE 8') > 0; agl.ISIE9 = ua.indexOf('MSIE 9') > 0; agl.ISIE10 = ua.indexOf('MSIE 10') > 0; agl.ISOLD = agl.ISIE6 || agl.ISIE7 || agl.ISIE8; // MUST be here agl.ISIE11UP = ua.indexOf('MSIE') == -1 && ua.indexOf('Trident') > 0; agl.ISIE10UP = agl.ISIE10 || agl.ISIE11UP; agl.ISIE9UP = agl.ISIE9 || agl.ISIE10UP; })(window, window.angular); 

después de eso, en su función, puede usarlo como

 function SampleController($scope){ $scope.click = function () { if(angular.ISCHROME) { alert("is chrome"); } } 

Modifiqué la técnica anterior que estaba cerca de lo que quería para angular y la convertí en un servicio :-). Incluí ie9 porque estaba teniendo algunos problemas en mi aplicación angularjs, pero podría ser algo que estoy haciendo, así que siéntete libre de eliminarlo.

 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 && !browserFlags.ISCHROME; browserFlags.ISWEBKIT = browserInfo.indexOf('WebKit') != -1; browserFlags.ISIE = browserInfo.indexOf('Trident') > 0 || navigator.userAgent.indexOf('MSIE') > 0; browserFlags.ISIE6 = browserInfo.indexOf('MSIE 6') > 0; browserFlags.ISIE7 = browserInfo.indexOf('MSIE 7') > 0; browserFlags.ISIE8 = browserInfo.indexOf('MSIE 8') > 0; browserFlags.ISIE9 = browserInfo.indexOf('MSIE 9') > 0; browserFlags.ISIE10 = browserInfo.indexOf('MSIE 10') > 0; browserFlags.ISOLD = browserFlags.ISIE6 || browserFlags.ISIE7 || browserFlags.ISIE8 || browserFlags.ISIE9; // MUST be here browserFlags.ISIE11UP = browserInfo.indexOf('MSIE') == -1 && browserInfo.indexOf('Trident') > 0; browserFlags.ISIE10UP = browserFlags.ISIE10 || browserFlags.ISIE11UP; browserFlags.ISIE9UP = browserFlags.ISIE9 || browserFlags.ISIE10UP; return !browserFlags.ISOLD; } }; }); 

Hay una biblioteca ng-device-detector que hace que detectar entidades como el navegador sea fácil.

Aquí hay un tutorial que explica cómo usar esta biblioteca. Detecta sistema operativo, navegador y dispositivo en AngularJS

ngDeviceDetector

Necesita agregar scripts re-tree.js y ng-device-detector.js en su html

Inyecte “ng.deviceDetector” como dependencia en su módulo.

Luego, inserte el servicio “deviceDetector” provisto por la biblioteca en su controlador o fábrica donde quiera que desee los datos.

“deviceDetector” contiene todos los datos relacionados con el navegador, el sistema operativo y el dispositivo.

¿Por qué no usar document.documentMode solo disponible en 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. } 

Por lo general, se debe evitar el rastreo del navegador, la detección de funciones es mucho mejor, pero a veces hay que hacerlo. Por ejemplo, en mi caso Windows 8 Tablets se superpone a la ventana del navegador con un teclado virtual; Ridículo, lo sé, pero a veces tienes que lidiar con la realidad.

Por lo tanto, mediría ‘navigator.userAgent’ como con el JavaScript normal (no se hunda en el hábito de tratar Angular como algo distinto de JavaScript, use JavaScript simple, si es posible, dará lugar a menos refactorizaciones futuras).

Sin embargo, para las pruebas, desea utilizar objetos inyectados en lugar de globales. Como ‘$ location’ no contiene el userAgent, el truco simple es usar ‘$ window.location.userAgent’. Ahora puede escribir pruebas que inyecten un código auxiliar de $ window con cualquier userAgent que desee simular.

No lo he usado durante años, pero Modernizr es una buena fuente de código para verificar características. https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059

Detección 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 }