Comment détecter un navigateur utilisant angularjs?
Je suis nouveau à angularjs. Comment puis-je détecter userAgent dans angularjs. Est-il possible d'utiliser cela dans le contrôleur? Essayé quelque chose comme ci-dessous mais pas de chance!
var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]);
J'ai besoin de détecter IE9 en particulier!
Comme Eliran Malka a demandé, pourquoi avez-vous besoin de vérifier IE 9?
Détecter la marque et la version du navigateur est généralement une mauvaise odeur. Cela signifie généralement que le code pose un problème plus important si vous avez besoin de JavaScript pour détecter des versions spécifiques du navigateur.
Il existe de véritables cas où une fonctionnalité ne fonctionnera pas, par exemple, WebSockets n'est pas pris en charge dans IE 8 ou 9. Ceci devrait être résolu en vérifiant si WebSocket est pris en charge et en appliquant un polyfill s'il n'y a pas de fichier natif. soutien.
Cela devrait être fait avec une bibliothèque comme Modernizr.
Cela étant dit, vous pouvez facilement créer un service qui renverrait le navigateur. Il existe des cas valides où une fonctionnalité existe dans un navigateur mais que la mise en œuvre est obsolète ou cassée. Modernizr n'est pas approprié pour ces cas.
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';
}
}]);
Correction des problèmes de frappe
Remarque: Ceci est juste un exemple de la façon de créer un service dans angular qui va renifler la chaîne userAgent. Ceci est juste un exemple de code qui ne devrait pas fonctionner en production et signaler tous les navigateurs dans toutes les situations.
UPDATE
Il est probablement préférable d'utiliser une bibliothèque tierce telle que https://github.com/ded/bowser ou https://github.com/darcyclarke/Detect.js . Ces bibliothèques placent un objet sur le window nommé bowser ou le détectent respectivement.
Vous pouvez ensuite exposer ceci au Angular IoC Container comme ceci:
angular.module('yourModule').value('bowser', bowser);
Ou
detectFactory.$inject = ['$window'];
function detectFactory($window) {
return detect.parse($window.navigator.userAgent);
}
angular.module('yourModule').factory('detect', detectFactory);
Vous pouvez ensuite en injecter une de la manière habituelle et utiliser l'API fournie par la bibliothèque. Si vous choisissez d'utiliser une autre bibliothèque utilisant une méthode constructeur, vous créerez une fabrique qui l'instancie:
function someLibFactory() {
return new SomeLib();
}
angular.module('yourModule').factory('someLib', someLibFactory);
Vous l'injecteriez ensuite dans vos contrôleurs et services de la manière habituelle.
Si la bibliothèque que vous injectez ne correspond pas exactement à vos besoins, vous pouvez utiliser le Adapter Pattern dans lequel vous créez une classe/un constructeur avec les méthodes exactes dont vous avez besoin.
Dans cet exemple, nous devons simplement tester IE 9 et nous allons utiliser la bowser lib ci-dessus.
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);
Maintenant, dans un contrôleur ou un service, vous pouvez injecter le browserAdapter et juste faire if (browserAdapter.isIe9) { // do something }
Si vous souhaitez utiliser plus tard detect au lieu de bowser, les modifications apportées à votre code seront isolées dans BrowserAdapter.
UPDATE
En réalité, ces valeurs ne changent jamais. SI vous chargez la page dans IE 9, elle ne deviendra jamais Chrome 44. Ainsi, au lieu d’enregistrer le BrowserAdapter en tant que service, placez simplement le résultat dans un value ou constant.
angular.module('app').value('isIe9', broswerAdapter.isIe9);
La bibliothèque angulaire utilise document.documentMode pour identifier IE. Il contient le numéro de version majeur pour IE ou NaN/indéfini si l'agent utilisateur n'est pas 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
Exemple avec $ document (wrapper angulaire pour 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
}
}
vous devriez utiliser des commentaires conditionnels
<!--[if IE 9]>
<script type="text/javascript">
window.isIE9 = true;
</script>
<![endif]-->
Vous pouvez alors vérifier $ window.isIE9 dans vos contrôleurs.
Vous ne savez pas pourquoi vous spécifiez qu'il doit être dans Angular. Il est facilement accompli via JavaScript. Regardez l'objet navigator .
Ouvrez simplement votre console et inspectez navigator. Il semble que vous recherchiez spécifiquement .userAgent ou .appVersion.
Je n'ai pas installé IE9, mais vous pouvez essayer le code suivant.
//Detect if IE 9
if(navigator.appVersion.indexOf("MSIE 9.")!=-1)
Vous pouvez facilement utiliser le module "ng-device-detect".
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);
}]);
Donc, vous pouvez déclarer plus d’utilitaires pour angular en créant un fichier avec un contenu (je suis la bibliothèque RGraph)
(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);
après cela, dans votre fonction, vous pouvez l'utiliser comme
function SampleController($scope){
$scope.click = function () {
if(angular.ISCHROME) {
alert("is chrome");
}
}
J'ai modifié la technique ci-dessus qui était proche de ce que je recherchais pour angular et l'ai transformée en service :-). J'ai inclus ie9 parce que j'avais des problèmes avec mon application angularjs, mais que je pourrais le faire, n'hésitez pas à le supprimer.
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;
}
};
});
Il existe une bibliothèque de détecteurs de périphériques qui facilite la détection d'entités telles que le navigateur.
Voici un tutoriel qui explique comment utiliser cette bibliothèque. Détecter le système d'exploitation, le navigateur et le périphérique dans AngularJS
Vous devez ajouter les scripts re-tree.js et ng-device-detect.js dans votre code HTML.
Injectez "ng.deviceDetector" comme dépendance dans votre module.
Ensuite, injectez le service "deviceDetector" fourni par la bibliothèque dans votre contrôleur ou votre usine où vous le souhaitez.
"deviceDetector" contient toutes les données concernant le navigateur, le système d'exploitation et le périphérique.
Pourquoi ne pas utiliser document.documentMode uniquement disponible sous 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.
}
La détection de navigateur est généralement à éviter, la détection de fonctionnalités est bien meilleure, mais vous devez parfois le faire. Par exemple, dans mon cas, les tablettes Windows 8 recouvrent la fenêtre du navigateur avec un clavier logiciel; Ridicule, je sais, mais il faut parfois faire face à la réalité.
Donc, vous mesureriez 'navigator.userAgent' comme avec du JavaScript normal (veuillez ne pas sombrer dans l'habitude de traiter Angular comme quelque chose de distinct du JavaScript, utilisez du simple JavaScript si possible, cela réduira le refactoring à l'avenir). .
Cependant, pour tester, vous voulez utiliser des objets injectés plutôt que des objets globaux. Puisque '$ location' ne contient pas l'utilisateurAgent, l'astuce consiste à utiliser '$ window.location.userAgent'. Vous pouvez maintenant écrire des tests qui injectent une souche $ window avec l’agent utilisateur que vous ne voulez pas simuler.
Je ne l'utilise pas depuis des années, mais Modernizr est une bonne source de code pour vérifier les fonctionnalités. https://github.com/Modernizr/Modernizr/issues/878#issuecomment-41448059
Détection 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
}