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

前端之家收集整理的这篇文章主要介绍了AngularJS基于桌面或移动的不同视图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想使用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'});
}]);

猜你在找的Angularjs相关文章