How to load different html depending on screen width? - angularjs

Question

I want to change the siteType value depending on screen width without editing in view part.
app.js
'use strict';
var app = angular.module('Location', []).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/', { templateUrl: 'pages/' + **params.siteType** + '/locationList.html', controller: Location }).
when('/locationDetail/:projectId', {
templateUrl: function (params) { return 'pages/' + **params.siteType** + '/locationDetail.html'; },
controller: Location
}).
otherwise({ redirectTo: '/' });
}])
app.config(['$locationProvider', function($location) {
$location.hashPrefix('!');
}]);
Controller.js
'use strict';
function Location($scope, $http, $routeParams) {
$scope.projectId = $routeParams.projectId;
$scope.selectedProject = null;
$scope.locationList = null;
$scope.siteType = "desktop";
$(window).resize(function(){
if(window.innerWidth < 600) {
$scope.$apply(function(){
$scope.siteType = "mobile";
});
} else {
$scope.$apply(function(){
$scope.siteType = "desktop";
});
}
});
$http.get("location.json")
.success(function(data){
$scope.locationList = data;
var indexedloc = [];
$scope.locationListToFilter = function(){
indexedloc = [];
return $scope.locationList;
}
$scope.filterLocation = function(Loc){
var locationIsNew = indexedloc.indexOf(Loc.field_data_field_location_field_location) == -1;
if(locationIsNew){
indexedloc.push(Loc.field_data_field_location_field_location);
}
return locationIsNew;
}
$scope.returnFilterLoc = function(){return indexedloc};
if($scope.projectId && $scope.projectId != null) {
for(var i = 0;i < $scope.locationList.length;i++){
if($scope.locationList[i].tid == $scope.projectId) {
$scope.selectedProject = $scope.locationList[i];
}
}
}
})
.error(function(data) {
$("div.category-wrapper").html("Error");
});
}

Answer 1

You can have a directive or controller that sets the value of what is included:
e.g.
<div ng-controller="MyController">
<div ng-include="{{ template }}"></div>
</div>
and on your controller you can set the value of template depending on the window or document
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
e.g.
myApp.controller('MyController', ['$scope', function($scope) {
if($(window).width() < 1199)
$scope.template = "mytemplate1.html"
else
$scope.template = "mytemplate2.html"
}]);
But all the above is a messy, not safe, ugly solution. You should handle the responsiveness using CSS media-queries.