AngularJS: Используйте различные шаблоны для настольных компьютеров и мобильных устройств?

Question

Для любого заданного маршрута или состояния в приложении AngularJS я бы хотел использовать специальный конкретный или настольный шаблон для мобильных устройств в зависимости от устройства пользователя. Я также хочу, чтобы пользователь мог выбрать версию (настольную или мобильную), независимо от того, на каком устройстве они находятся.

В частности, я хочу отдельный шаблон, потому что во многих случаях отдельный шаблон намного проще, чем при использовании адаптивного дизайна.

Есть ли простой способ сделать это?

Вот что я хотел бы сделать, но я не знаю, как сделать переменную isMobile доступной для функции templateUrl с помощью углового ui-router. Любая помощь будет оценена.

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

Вы можете просто перевал углового и использовать родную window.sessionStorage или если вы хотите, чтобы ваш пользователь сохранить предпочтение, window.localStorage. В любом случае служба $ window по существу является оберткой.

Answer 2

Вы можете установить это с константой (при условии, что вы можете обработать постоянное значение до того, как приложение загрузится).

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

EDIT Разрешить пользователю ПЕРЕКЛЮЧЕНИЯ ШАБЛОНЫ

Если вы хотите, чтобы позволить пользователю сделать выбор, я бы рекомендовал создать фабрику, чтобы получить/установить это значение.

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, что заставит изменения.