Angularjs Matchmedia on page routing

Question

How can I perform a matchmedia for page routing below. That is I would like load a different templateURL for home if it is a tablet?

app.config(['$routeProvider',function($routeProvider) {
        //configure the routes
        $routeProvider

        .when('/',{
        // route for the home page
            templateUrl:'partials/login/login.html',
            controller:'loginCtrl'      
        })

        .when('/home',{
        // route for the home page

            templateUrl:'partials/home/home.html',
            controller:'mainCtrl'       
        })

        .otherwise({
            //when all else fails
            templateUrl:'partials/login/login.html',
            controller:'loginCtrl'
        });


}]);

Answer 1

You could simply achieve this by adding function while generation templateUrl, before returning templateUrl to check navigator string and browser.

Code

$routeProvider
    .when('/', {
    // route for the home page
    templateUrl: function() {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            return 'partials/mobile/login/login.html'; //mobile template
        } else {
            return 'partials/login/login.html';
        }
    },
    controller: 'loginCtrl'
})