Angular module to detect OS / Browser / Device
Uses user-agent to set CSS classes or directly usable via JS. See website: http://srfrnk.github.io/ng-device-detector
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>
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.
Holds the following properties:
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 :)
See plunker