AngularJS基于桌面或移动的不同视图

Question

我想AngularJS用于单个页面的webapp。我担心是否有一种优雅的方法可以根据客户端是移动设备还是台式机来“发送”不同的模板。有什么办法吗？是否建议Web服务器“了解”浏览器是什么并相应地发送视图，以便浏览器始终要求输入template.html或编写JavaScript，以便浏览器告诉Web服务器获取mobile
/ template.html？

Answer 1

我将如何向用户显示一个模板并使该模板具有响应性。仅仅因为您使用的是AngularJS模板，我看不出您不希望使模板具有响应性的原因。我不会采用涉及基于设备浏览器向用户显示不同模板的解决方案。

也就是说，我要做的一种方法是：

1. 为Web应用程序的主页/登录页面提供一个简单的脚本，该脚本确定浏览器/设备。可以在这里找到。
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'});
}]);