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

对于AngularJS应用程序中的任何给定路由或状态，我希望根据用户的设备使用特定于移动设备或桌面的模板。我也希望用户能够选择哪个版本（桌面或移动版），而不管他们在哪个设备上。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' 
    }); 

}

来源

2015-10-06 Corey Quillen

'isMobile'在'templateUrl'函数内部可用。你有没有尝试运行你的代码？ – dfsq

我知道它是成功地从上面引用var isMobile，但是如何从'window.sessionStorage'这样的'global'位置设置它？ –

你可能想仅仅通过传球的角度和使用本地window.sessionStorage或者如果你想让你的用户保存的偏好，window.localStorage。无论如何，$ window服务本质上只是一个包装。

来源

2015-10-06 20:32:04

这将更容易实现，但更难以进行单元测试。 –

你可以用一个常量来设置它（假设你可以在应用程序被引导之前处理常量值）。

angular.module('app.items') 
    .constant('isMobile', window.sessionStorage.getItem('isMobile')); 
    .config(['$injector', function($injector) { 
     var $stateProvider = $injector.get('$stateProvider'), 
      isMobile  = $injector.get('isMobile'); 
    ]});

编辑，允许如果你想允许用户做出选择用户切换TEMPLATES

，我建议建立一个工厂，以获得/设置值。

angular.module('app.items') 
    .factory('isMobile', [function() { 
     return { 
      get: function() { return $window.sessionStorage.getItem('isMobile'); }, 
      set: function(bool) { $window.sessionStorage.setItem('isMobile', bool); } 
     }; 
    }]);

然后在你的$stateProvider

angular.module('app.items') 
    .config(['$stateProvider', function($stateProvider) { 
     $stateProvider 
      .state('itemsList', { 
       url: '/items', 
       templateUrl: ['$stateParams', 'isMobile', function($stateParams, isMobile) { 
        if (isMobile.get()) { return '/mobile/template.html'; } 
        else { return 'desktop/template.html'; } 
       }], 
       controller: 'ItemsListController' 
      }); 
    }]);

更新将只对使用此方法的状态变化发生，但你可以切实执行对isMobile.set一些任务，这将迫使改变。

来源

2015-10-06 20:43:23

我将如何允许用户选择移动或桌面站点，而不管他们使用此预引导技术的设备如何？ –

我没有考虑到我的原始答案。我已经更新了我的答案以代替使用工厂。 –

我想这只是语义，但我决定不建议一个常数，因为它的值不是恒定的，并且会受到用户选择的控制。 –

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

回答

相关问题