AngularJS different views based on Desktop or Mobile

Question

I would like to use AngularJS for a single page webapp. I am concerned if there is an elegant way to \"send\" different templates based on whether the client is

Answer 1

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) {
    $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'});
}]);