AngularJS detect Bootstrap Environment

Question

I am trying to use AngularJS to detect bootstrap environment. This is my code:

angular.module("envService",[])
    .factory("envService", envService);

    function envService($window){
        return env();

        ////////////

        function env(){
            var w = angular.element($window);
            var winWidth = w.width();
            if(winWidth<768){
                return 'xs';
            }else if(winWidth>=1200){
                return 'lg';
            }else if(winWidth>=992){
                return 'md';
            }else if(winWidth>=768){
                return 'sm';
            }
        }

    }

The function works and return the value based on the window size. However, it will always return the same environment even if the window size is changed. How can I fix it?

Answer 1

You need to watch for the window resize event.

angular.module('envService',[])
.factory('envFactory', ['$window', '$timeout', function($window, $timeout) {

var envFactory = {};
var t;

envFactory.getEnv = function () {
  var w = angular.element($window);
  var winWidth = w.width();
  if(winWidth<768){
      return 'xs';
  }else if(winWidth>=1200){
      return 'lg';
  }else if(winWidth>=992){
      return 'md';
  }else if(winWidth>=768){
      return 'sm';
  }        
};

angular.element($window).bind('resize', function () {
  $timeout.cancel(t);
  t = $timeout(function () {
    return envFactory.getEnv();
  }, 300); // check if resize event is still happening
});    

return envFactory;

}]);

angular.module('app',['envService']).controller('AppController', ['$scope', 'envFactory',
function($scope, envFactory) {
    // watch for changes
    $scope.$watch(function () { return envFactory.getEnv() }, function (newVal, oldVal) {
        if (typeof newVal !== 'undefined') {
            $scope.env = newVal;
            console.log($scope.env);
        }
    });

}
]);