Angular matchMedia Module

Sometimes you want to show or hide content based on whether your site is running on a mobile or desktop computer or other similar conditions. And sometimes you want that to happen in your AngularJS controllers. And sometimes you just want a plugin that lets you do that and works with older browsers so you don't need to think about those things too much. Here's a plugin for that sometimes.

The Angular matchMedia Module provides a service that allows you to check the screen size of the current device against Bootstrap3 breakpoints.

angular.module('myApp', ['matchMedia'])  
.controller('mainController', ['screenSize', function (screenSize) {
  if (screensize.is('xs, sm')) {
    // do awesome stuff here
  }
}]);

You can also configure it to use different breakpoints or write some crazy media queries to check for things like retina-compatibility or device orientation.

angular.module('myApp', ['matchMedia'])  
.controller('mainController', ['screenSize', function (screenSize) {
  screenSize.rules = {
    retina: 'only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)'
  };
  if (screenSize.is('retina')) {
    // switch out regular images for hi-dpi ones here
  }
}]);

It's easy to work the media query into a directive or include it in other modules as a dependency for injection into factories and providers. As a directive it's particularly useful for blocking unnecessary images from loading on mobile devices:

<img ng-if='desktop' ng-src='http://example.com/path/to/giant/image.jpg'>  

Check out the code and full documentation on github: https://github.com/jacopotarantino/angular-match-media

Please contribute! Open source software works better when we work together. And if you have questions feel free to use the contact form or submit an issue on the official repo.

If you like it and want to see more plugins like this, make a donation: https://www.gittip.com/jacopotarantino/