I've been working on an Angularjs application and everything is running smoothly, but I'm facing challenges when it comes to implementing a mobile version of the site. Simply using responsive styles won't cut it; I need to use different view files for the mobile and desktop versions. In my app, I'm utilizing ui-router with the following configuration:
dopGruz
.config([ '$stateProvider', '$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider){
$stateProvider
.state('root',{
views: {
"navbar" : {
controller: 'viewsController',
templateProvider: function($http, viewsWatcherFactory) {
return viewsWatcherFactory
.get('app/views/nav-bar.html')
.then(function(obj){
return $http
.get(obj.templateName)
.then(function(tpl){
return tpl.data;
});
});
} },
"" : { template: '<div ui-view></div>' }
}
})
My factory returns a mobile template based on window width:
dopGruz.factory('viewsWatcherFactory', [
'$http',
'$timeout',
function($http, $timeout) {
var _ifMobile = (function(){
return window.innerWidth < 850;
})();
return {
get : function(id) {
return $timeout(function(){
var path = id;
if (_ifMobile) {
path = id.split('/');
path.splice(path.length-1,0,'mobile');
}
if (Array.isArray(path)) {
path = path.join('/');
}
return {templateName : path};
}, 0);
}
};
}
]);
While this setup works well on page load by loading the mobile version of the template if the window width is less than 850px, I'm looking for a way to manually call the templateProvider based on an event. I have a controller where I would like to implement this:
dopGruz.controller('viewsController', function ($scope,$window) {
angular.element($window).bind('resize', function() {
console.log($window.innerWidth);
// Implement logic to call templateProvider and update views files.
$scope.$digest();
});
});
If there's a simpler or more efficient way to achieve this, any guidance would be greatly appreciated.