AngularJS шаблон переключения

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

С помощью начальной загрузки вы можете показывать и скрывать блоки и перемещать их со смещением, но у него есть свои ограничения. Это требовательный клиент, который не будет соблюдать такие ограничения, поэтому мы ищем другие варианты.

Чтобы избежать создания дублированного контента и при этом иметь возможность использовать мобильные и настольные системы, наша команда разработала AngularJS.

Наши контроллеры данных JSON и Angular могут оставаться прежними, но нам нужно переключать представления только в том случае, если они находятся на мобильном устройстве, планшете или компьютере.

Есть ли хорошее стабильное решение, чтобы это заработало? И можем ли мы протестировать его так же, как мы тестируем адаптивный дизайн, изменив размеры браузера, или единственное решение - определение идентификатора пользователя? Это было бы болезненно во время тестирования, так как нам нужно много устройств или эмуляторов для тестирования.

Источник

3 ответа

Вы можете создать собственную директиву для этого.

app.directive('responsiveTemplate', function() {
    return {
        restrict: 'E',
        template: '<ng-include src="template"></ng-include>',
        scope: true,
        link: function(scope, elem, attr) {
            var mobile = attr.mobile;
            var desktop = attr.desktop;
            scope.template = desktop;

            $(window).resize(function() {
                if (windowSizeIsDesktop() && scope.template != desktop) {
                    scope.template = desktop;
                    scope.$apply();
                }
                else if (windowSizeIsMobile() && scope.template != mobile) {
                    scope.template = mobile;
                    scope.$apply();
                }
            });
        }
    }
})

Использовать как элемент

<responsive-template desktop="desktop.html" mobile="mobile.html"></responsive-template>

Я не определила windowSize функции, хотя они тривиальны для реализации

Источник 
$routeProvider.
 when('/:menu/:page', {
     controller:HandleCtrl,
     template:'<div ng-include="templateUrl">Loading...</div>'
 }).

В сочетании с:

function HandleCtrl($scope, $routeParams){
 $scope.templateUrl = $routeParams.menu +'/'+ $routeParams.page + '.html'
}

Будет ли это безопасно? Внутри контроллера я могу решить, какой HTML-файл я хочу использовать в качестве шаблона

Источник

Я бы, вероятно, просто использовал для этого ng-if, но я бы сначала убедился, что он вам нужен, и не могу просто использовать css / media запросы для того, что вы описываете. Вот пример логики ng-if:

<body ng-app="myApp"> 
   <div ng-controller="ctrl" >
      <div ng-if="isWide()">
         <p>Wide Content</p>
      </div>
      <div ng-if="!isWide()">
          <p>Narrow Content</p>
      </div>
   </div>
</body>

И JS:

angular.module('myApp', []).controller('ctrl', function($scope, $window) {    
   $scope.isWide = function() {
        return $window.innerWidth > 500; //your breakpoint here.
   }

   angular.element($window).on('resize', angular.bind($scope, $scope.$apply));
});

http://jsfiddle.net/gq2obdcq/8/

Просто перетащите разделенную панель, чтобы увидеть результаты в скрипке.

Источник
Другие вопросы по тегам