Angularjs - 根据浏览器/平台更改视图？

Question

是否有任何内置服务/指令/路由根据用户访问的浏览器/平台类型更改视图（或使用路由的页面）？我希望手机和平板电脑的视图与桌面用户不同。

Answer 1

我不知道Angular内置的任何内容，但您可以通过在路由规则中插入逻辑来实现此目的。例如：

angular.module('browser-routing', []).
  config(function($routeProvider) {
    $routeProvider.
      when('/', {templateUrl: getBrowser() + '.html'})
});

在此示例中，如果getBrowser（）返回'iphone'，它将呈现视图iphone.html

你可以使用 BrowserDetect做名字所暗示的。

fiddle example for Chrome and Firefox detection

Answer 2

尽管AngularJS没有任何特殊功能可以开箱即用，但有许多不同的方法可以实现这样的目标：

1. 使用CSS3 media queries to make a responsive design。根据您的需要，这可能是您最好的选择，因为您可以避免为多个视口重新实现功能。

2. 您可以编写服务以检查并更改路线：

   myApp.factory('checkWidth', function ($location, $window) {
     return function () {
       if ($window.document.width < 700) {
         $location.url('/mobile');
       }
     }
   });