Angularjs 页面路由上的 Matchmedia

Question

如何为下面的页面路由执行匹配媒体。也就是说，如果是平板电脑，我想为家里加载一个不同的 templateURL？

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

您可以通过在生成 templateUrl 时添加函数来简单地实现此目的，在返回之前 templateUrl 检查导航器字符串和浏览器。

代码

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

Angularjs 页面路由上的 Matchmedia

Angularjs Matchmedia on page routing

angularjs

matchmedia