AngularJS基于桌面或移动不同的看法 [英] AngularJS different views based on Desktop or Mobile

问题描述

我想用 AngularJS 单个页面的web应用。
我担心，如果有一个优雅的方式来送的基础上的客户端是手机或桌面不同的模板。
有没有办法做到这一点？它是建议的Web服务器理解浏览器是什么，并相应地发送视图，以便浏览器总是要template.html或者你写javascript所以浏览器会告诉Web服务器，以获得移动/ 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. 要对Web应用程序决定了浏览器/设备的主/登陆页面的简单脚本。这可以找到<一个href=\"http://stackoverflow.com/questions/11381673/javascript-solution-to-detect-mobile-browser\">here.


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屋！