AngularJS 基于桌面或移动设备的不同视图 [英] AngularJS different views based on Desktop or Mobile

问题描述

我想将 AngularJS 用于单页 web 应用程序.我担心是否有一种优雅的方式可以根据客户端是移动设备还是桌面设备来发送"不同的模板.有什么办法吗?是否建议网络服务器理解"浏览器是什么并相应地发送视图，以便浏览器始终要求提供 template.html 或者您编写 javascript 以便浏览器告诉网络服务器获取 mobile/template.html ?

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 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 ?

推荐答案

我将如何处理这个问题是向用户显示一个模板并使模板具有响应性.仅仅因为您使用的是 AngularJS 模板，我看不出您不想使模板具有响应性的原因.我不会选择涉及根据设备浏览器向用户显示不同模板的解决方案.

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. 为确定浏览器/设备的网络应用程序的主页/登陆页面提供一个简单的脚本.这可以在此处找到.
2. 接下来，根据浏览器/设备，您将用户重定向到不同的路由
3. 根据浏览器/设备类型有不同的路线 - 根据路线显示不同的模板，从而根据路线确定它是否是移动设备.

最后一步类似于:

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

这篇关于AngularJS 基于桌面或移动设备的不同视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！