AngularJS: Use different templates for desktop and mobile?

Question

For any given route or state in an AngularJS application, I would like the option to use a mobile specific or desktop specific template depending on the user's device. I also want the user to be able to choose which version (desktop or mobile) regardless of the device they are on.

Specifically, I want a separate template because in many cases a separate template is far simpler than using responsive design.

Is there a simple way to accomplish this?

Here is what I would like to do, but I don't know how to make an 'isMobile' variable accessible to the templateUrl function using the angular-ui-router. Any help will be greatly appreciated.

angular
    .module('app.items', [])
    .config(config);

function config($stateProvider) {

    //$window service not available in config block, so how can I set this variable?
    var isMobile = $window.sessionStorage.getItem('isMobile'); 

    $stateProvider

    .state('itemsList', {
        url: '/items',
        templateUrl: function($stateParams) {

            if (isMobile) {  //How do I get this information (variable) in here?
                return 'app/items/list.mobile.html';
            }
            else {
                return 'app/items/list.desktop.html'
            }

        },
        controller: 'ItemsListController'
    });

}

Answer 1

You may want to just by pass angular and use the native window.sessionStorage or if you want to let your user save a preference, window.localStorage. The $window service is essentially just a wrapper around this anyway.