lostpacket lostpacket - 1 year ago 235
AngularJS Question

AngularJS different views based on Desktop or Mobile

I would like to use

for a single page webapp.
I am concerned if there is an elegant way to "send" different templates based on whether the client is a mobile or desktop.
Is there any way to do it ? Is it recommended that web server "understand" what the browser is and send the view accordingly so the browser always asks for template.html OR you write javascript so the browser will tell webserver to get the mobile/template.html ?

Answer Source

How I would go about with this is to display one template to the user and make the template Responsive. Just because you are using AngularJS templates, I do not see a reason why you would not want to make the template responsive. I would not go for the solution that involves displaying a different template to the user based on the device browser.

That said, one way that I would do is:

  1. To have a simple script for the home / landing page of the web application that determines the browser / device. This can be found here.
  2. Next, depending on the browser / device, you redirect the user to a different route
  3. Have different routes based on the browser / device type - display a different template based on the route and thus identify if it s a mobile device or not based on the route.

The last step would be something like:

angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
      //Display desktop version
      when('/desktop/homePage', {
        //Template for Desktop based browsers
        templateUrl: 'partials/desktop/home-page.html'
      //Display mobile version
      when('/mobile/homePage', {
        //Template for Mobile based browsers
        templateUrl: 'partials/mobile/home-page.html'
      otherwise({redirectTo: '/desktop/homePage'});