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