如何使用角度来检测浏览器？ [英] How to detect browser using angular?

问题描述

我是新来的角。如何检测的userAgent的角度。是否有可能使用的控制器？试图像下面，但没有运气！

I am new to angular. How can I detect userAgent in angular. 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]);

我需要检测IE9特别！

I need to detect IE9 specifically!

推荐答案

像Eliran马尔卡问，为什么你需要检查IE 9？

Like Eliran Malka asked, why do you need to check for IE 9?

浏览器检测并做出版一般是难闻的气味。这通常意味着你有一个与code一个更大的问题，如果你需要的JavaScript来检测浏览器的特定版本。

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.

有真实的案例，其中一个功能将无法正常工作，好比说的WebSockets是不是在IE 8支持或9这应该通过检查WebSocket的支持，并应用填充工具，如果没有原生支持来解决。

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.

这应该像Modernizr的库来完成。

This should be done with a library like Modernizr.

话虽这么说，你可以轻松地创建服务，将返回浏览器。有有效的情况下，一个功能在浏览器中存在但执行是过时或损坏。 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';
    }

}]);

固定错字broswers

注意：这只是如何创建一个角度服务，将嗅探的userAgent字符串的例子。这只是一个预计不会在生产工作，在任何情况下报告所有的浏览器code的例子。

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.

更新

这可能是最好使用第三​​方库如 https://github.com/ded/bowser 或<一个HREF =htt​​ps://github.com/darcyclarke/Detect.js> https://github.com/darcyclarke/Detect.js 。这些库放置在窗口名为鲍泽上的一个对象或分别检测。

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.

您就可以让本在角IoC容器是这样的：

You can then expose this to the Angular IoC Container like this:

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中，你可以创建一个工厂，将其实例：

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.

在这个例子中，我们只需要测试IE 9，和我们将要使用鲍泽 LIB以上。

In this example we just need to test for IE 9, and we are going to use the bowser lib above.

BroswerAdapter.$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 和刚做如果（browserAdapter.isIe9）{//做一些事情}

Now in a controller or service you can inject the browserAdapter and just do if (browserAdapter.isIe9) { // do something }

如果以后你想用检测，而不是鲍泽，在code中的变化将被隔离到BrowserAdapter。

If later you wanted to use detect instead of bowser, the changes in your code would be isolated to the BrowserAdapter.

更新

在现实中这些值永远不会改变。如果您加载网页在IE 9它永远不会成为浏览器44.因此，而不是注册BrowserAdapter作为服务的，只要把在值的结果或恒。

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

这篇关于如何使用角度来检测浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！