AngularJS:为桌面和移动使用不同的模板？

Question

对于 AngularJS 应用程序中的任何给定路由或状态，我希望可以选择使用特定于移动设备或特定于桌面的模板，具体取决于用户的设备。我还希望用户能够选择哪个版本(桌面版或移动版)，而不管他们使用的是什么设备。

具体来说，我想要一个单独的模板，因为在许多情况下，单独的模板比使用响应式设计要简单得多。

有没有一种简单的方法可以做到这一点？

这是我想做的，但我不知道如何使用 angular-ui-router 使 templateUrl 函数可以访问“isMobile”变量。任何帮助将不胜感激。

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

您可能只想通过 angular 并使用 native window.sessionStorage，或者如果您想让您的用户保存首选项，window.localStorage。无论如何， $window 服务本质上只是一个包装器。