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

发布时间：2020-12-17 08:44:07 所属栏目：安全来源：网络整理

导读：我想使用AngularJS的单页webapp。我担心如果有一个优雅的方式来“发送”不同的模板，基于客户端是移动或桌面。有什么办法吗？建议web服务器“理解”浏览器是什么，并相应地发送视图，所以浏览器总是要求template.html或你写javascript，以便浏览器会告诉we

我想使用AngularJS的单页webapp。
我担心如果有一个优雅的方式来“发送”不同的模板，基于客户端是移动或桌面。
有什么办法吗？建议web服务器“理解”浏览器是什么，并相应地发送视图，所以浏览器总是要求template.html或你写javascript，以便浏览器会告诉web服务器获取mobile / template.html？

我怎么会这样做是为用户显示一个模板，并使模板响应。只是因为你使用AngularJS模板，我没有看到一个原因，你不想让模板响应。我不会去寻找涉及根据设备浏览器向用户显示不同的模板的解决方案。

也就是说，我会做的一种方式是：

>为web应用程序的主页/着陆页确定浏览器/设备的简单脚本。这可以找到here。
>接下来，根据浏览器/设备，您将用户重定向到不同的路由
>根据浏览器/设备类型有不同的路由 – 根据路由显示不同的模板，从而基于路由识别它是否是移动设备。

最后一步是这样的：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!