psResponsive

Service to help determine screen size for responsive AngularJS web apps

DEMO http://plnkr.co/edit/yoQAbpFiCUzHQFruRyA8?p=preview

Download and add ps-responsive.js Add to your app

var app = angular.module('plunker', ['psResponsive']);

Use in controller by loading 'psResponsive' as you would any other service

app.controller('appCtrl',
	['psResponsive', function(psResponsive){
		if(psResponsive('Large')){
			... 
		}
	}])

Use it app wide in your HTML and $scope by attaching it to root scope

app.run(['$rootScope', 'psResponsive', function($rootScope, psResponsive){
    $rootScope.r = psResponsive;
}]);
// remember to be carefull about $rootScope
<div ng-show="r('> small')">Show on screens larger than small</div>
<div ng-show="r('< 500')">Show on screens less than 500px</div>
<div ng-show="r('medium')">Show on medium screens only</div>
<div ng-show="r('orientation') == 'landscape'">Show on landscape</div>

Define your own screen size labels (default sizes are based on twitter bootstrap)

.value('psResponsiveConfig', {
    sizes: [{
        name: 'tiny',
        minWidth: 0
    }, {
        name: 'small',
        minWidth: 768
    }, {
        name: 'medium',
        minWidth: 992
    }, {
        name: 'large',
        minWidth: 1200
    }]
})