ng-device-detector

2018-08-08 admin

ng-device-detector是什么

什么是ng-device-detector,Uses user-agent to set css classes or directly usable via JS.

ng-device-detector介绍、ng-device-detector使用

Angular module to detect OS / Browser / Device

Build StatusGitHub issuesKnown VulnerabilitiesOpen Source Helpers

GitHub licensenpmnpmnpm

Commitizen friendlySemver

Uses user-agent to set CSS classes or directly usable via JS. See website: http://srfrnk.github.io/ng-device-detector

Install

NPM

$ npm install ng-device-detector --save

Bower

$ bower install ng-device-detector --save

Browser (Add scripts in HTML)

<script type="text/javascript" src=".../re-tree.js"></script>
<script type="text/javascript" src=".../ua-device-detector.js"></script>
<script type="text/javascript" src=".../ng-device-detector.js"></script>

Adding 'ng.deviceDetector' to your app module dependencies

angular.module('app', ['ng.deviceDetector']);

Injecting DeviceDetector service in controller

angular.module('app').controller('Home', function($scope, deviceDetector){
  // Awesome stuff
});

To add classes, add directive like: <div device-detector>

Setup

You can set custom detectors at the provider object. The

angular.module('app', ["ng.deviceDetector"])
    .config(['deviceDetectorProvider', function(deviceDetectorProvider) {
      deviceDetectorProvider.addCustom("Custom_UA_Entry", {
        and:["\\bCustom_UA_Entry\\b", {
            not:"\\bChrome\\b"
        }]
      });
    }])

    .controller('Home', function($scope, deviceDetector) {
      // (true / false)
      $scope.customUAEntry = deviceDetector.custom["Custom_UA_Entry"];
    });

Custom detectors will also be added as CSS classes with ‘is-’ prefix and encoded into css class name casing.

deviceDetector service

Holds the following properties:

  • raw : object : contains the raw values… for internal use mostly.
  • os : string : name of current OS
  • browser : string : name of current browser
  • device : string : name of current device

Support

At first I added just major browser, OS, device support. With help from mariendries, javierprovecho and crisandretta more support was added. The current list of supported browser, OS, device can be easily viewed in here.

Pull-requests with new stuff will be highly appreciated :)

Example

See plunker

License

MIT License

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37553.html

文章标题:ng-device-detector

回到顶部