AngularJS template switching

Question

Our client wants a responsive website, but he wants to change and move so much content that we will run into bootstrap limitations.

With bootstrap you can show and hide blocks and move them around with offset, but somehow it has it's limitations. It is a demanding client that will not respect such limitations so we are looking for other options.

To avoid creating duplicate content and still have the ability to give the mobile/desktop experience our team came up with AngularJS.

Our JSON data and Angular controllers can stay the same, but we only need to switch views if it is on mobile/tablet/desktop.

Is there a good stable solution to get this working? And can we test it like we test responsive design by resizing the browser, or is useragent detection the only solution? That would be a pain during testing, since we need then many devices or emulators to test.

Answer 1

You can create a custom directive for this.

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();
                }
            });
        }
    }
})

Use as an element

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

I have not defined the windowSize functions though they are trivial to implement