angularjs를 사용하여 브라우저를 감지하는 방법은 무엇입니까?

angularjs를 사용하여 브라우저를 감지하는 방법은 무엇입니까?

---

저는 angularjs를 처음 사용합니다. angularjs에서 userAgent를 어떻게 감지 할 수 있습니까? 컨트롤러에서 사용할 수 있습니까? 아래와 같이 시도했지만 운이 없습니다!

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

IE9를 구체적으로 감지해야합니다!

---

Eliran Malka가 물었던 것처럼 IE 9를 확인해야하는 이유는 무엇입니까?

브라우저 제조업체 및 버전을 감지하는 것은 일반적으로 나쁜 냄새입니다. 이것은 일반적으로 특정 버전의 브라우저를 감지하기 위해 JavaScript가 필요한 경우 코드에 더 큰 문제가 있음을 의미합니다.

IE 8 또는 9에서 WebSockets가 지원되지 않는 것과 같이 기능이 작동하지 않는 실제 사례가 있습니다. 이는 WebSocket 지원을 확인하고 기본 지원이없는 경우 polyfill을 적용하여 해결해야합니다.

이것은 Modernizr와 같은 라이브러리로 이루어져야합니다.

즉, 브라우저를 반환하는 서비스를 쉽게 만들 수 있습니다. 브라우저에 기능이 있지만 구현이 오래되었거나 손상된 경우가 있습니다. Modernizr는 이러한 경우에 적합하지 않습니다.

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

}]);

오타 브라우저 수정

참고 : 이것은 userAgent 문자열을 스니핑하는 각도로 서비스를 만드는 방법의 예일뿐입니다. 이것은 프로덕션에서 작동하지 않고 모든 상황에서 모든 브라우저를보고하는 코드 예제 일뿐입니다.

최신 정보

https://github.com/ded/bowser 또는 https://github.com/darcyclarke/Detect.js 와 같은 타사 라이브러리를 사용하는 것이 가장 좋습니다 . 이 libs는 window명명 된 bowser 에 개체를 배치 하거나 각각 감지합니다.

그런 다음이를 다음 Angular IoC Container과 같이 노출 할 수 있습니다 .

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

또는

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

그런 다음 일반적인 방법 중 하나를 삽입하고 lib에서 제공하는 API를 사용합니다. 대신 생성자 메서드를 사용하는 다른 lib를 사용하도록 선택하면이를 인스턴스화하는 팩토리를 만듭니다.

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

그런 다음이를 컨트롤러와 서비스에 일반적인 방식으로 삽입합니다.

삽입하는 라이브러리가 요구 사항과 정확히 일치하지 않는 Adapter Pattern경우 필요한 정확한 메서드를 사용하여 클래스 / 생성자를 만드는 위치 를 사용할 수 있습니다.

이 예제에서는 IE 9를 테스트하기 만하면되며 bowser위 의 lib 를 사용할 것 입니다.

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

이제 컨트롤러 또는 서비스에 당신이를 삽입 할 수 browserAdapter그냥 할if (browserAdapter.isIe9) { // do something }

나중에 bowser 대신 detect를 사용하려는 경우 코드의 변경 사항이 BrowserAdapter에 격리됩니다.

최신 정보

실제로 이러한 가치는 변하지 않습니다. IE 9에서 페이지를로드하면 Chrome 44가되지 않습니다. 따라서 BrowserAdapter를 서비스로 등록하는 대신 결과를 value또는 constant.

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

---

Angular 라이브러리는 document.documentMode 를 사용 하여 IE를 식별합니다. IE의 메이저 버전 번호를 보유하거나 사용자 에이전트가 IE가 아닌 경우 NaN / undefined를 보유합니다.

/**
* 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

$ document (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

  }
}

---

조건부 주석을 사용해야합니다.

<!--[if IE 9]>
<script type="text/javascript">
    window.isIE9 = true;
</script>
<![endif]-->

그런 다음 컨트롤러에서 $ window.isIE9를 확인할 수 있습니다.

---

Angular 내에 있어야한다고 지정하는 이유가 확실하지 않습니다. JavaScript를 통해 쉽게 수행 할 수 있습니다. navigator물건을 보세요 .

콘솔을 열고 navigator. 구체적으로 찾고있는 것이 .userAgent또는 인 것 같습니다 .appVersion.

IE9가 설치되어 있지 않지만 다음 코드를 시도해 볼 수 있습니다.

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

---

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

---

따라서 콘텐츠가있는 파일을 생성하여 각도에 대한 더 많은 유틸리티를 선언 할 수 있습니다 (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);

그 후, 함수 사용에서 다음과 같이 사용할 수 있습니다.

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

---

나는 앵귤러를 위해 원하는 것에 가까운 위의 기술을 수정하여 서비스로 바꿨습니다. :-). angularjs 앱에 몇 가지 문제가 있었기 때문에 ie9를 포함했지만 내가하는 일이 될 수 있으므로 자유롭게 꺼내십시오.

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

});

---

브라우저, OS와 같은 엔티티를 쉽게 감지 할 수있는 라이브러리 ng-device-detector가 있습니다.

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.

---

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.
}

---

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

---

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
}

참고URL : https://stackoverflow.com/questions/22947535/how-to-detect-browser-using-angularjs