AngularJS基於桌面或移動設備的不同視圖

Question

我想使用AngularJS來創建單頁web應用。 我擔心是否有一種優雅的方式來根據客戶端是移動設備還是桌面設備來「發送」不同的模板。 有什麼辦法可以做到嗎？建議網絡服務器「理解」瀏覽器是什麼，並相應地發送視圖，以便瀏覽器始終要求template.html或者您編寫JavaScript，以便瀏覽器告訴Web服務器獲取mobile/template.html？

Answer 1

我將如何處理這個問題是向用戶顯示一個模板並使模板響應。僅僅因爲你使用的是AngularJS模板，我沒有看到你不想讓模板響應的原因。我不會選擇基於設備瀏覽器爲用戶顯示不同模板的解決方案。我會做

這就是說，一個辦法是：

1. 有一個簡單的腳本的Web應用程序，決定了瀏覽器/設備的主/目標網頁。這可以找到here。
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'}); 
}]); 

Answer 2

自適應設計將工作適合規模較小的應用程序，但是，當你移動到更大的應用程序變得相當混亂。

我個人建議在頁面加載時檢測用戶代理，並在需要時將他重定向到單獨的移動應用程序。您仍然可以將大部分代碼庫用於這兩個應用程序（只需導入單個模塊）。

如果您有意使用javascript我建議這個解決方案檢測用戶代理（只需選擇的JavaScript）：http://detectmobilebrowsers.com/最廣泛的解決方案，我發現到目前爲止

Answer 3

，如果你想使用相同的URL，但有兩個套不同的HTML（比如換出大量的圖像和視頻頁內別的東西），我會做這樣的事情

'use strict'; 

angular.module('MyApp', []).config(function ($routeProvider) { 
// Magic sauce, imediate so the value is stored and we don't need to lookup every check 
    var _isNotMobile = (function() { 
     var check = false; 
     (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm(os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(|\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-|)|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera); 
     return !check; 
    })(); 

    // Swap out different HTML because you want to say, hide a video etc. 
    $routeProvider 
     .when('/', { 
      templateUrl: (_isNotMobile)? 'views/MY_DESKTOP_VIEW.html':'views/m/MY_MOBILE_VIEW.html', 
      controller: (_isNotMobile)?'MyHomeCtrl':'MyMobileCtrl' 
      }) 
      .otherwise({ 
      redirectTo: '/' 
      }); 
}); 

Answer 4

自舉+ ANGULARJS解決這個問題：

您可以檢查出angular-match-media庫。這是非常小的尺寸，但非常有用和優雅。

https://github.com/jacopotarantino/angular-match-media

**當心：這是安裝了bower install angular-media-queries;但是，js文件的路徑是/path/to/library/angular-media-queries/match-media

Answer 5

使用boostrap。它可以很容易地完成。

<!-- Display Only Screen > Big --> 
<div class="hidden-xs"> 
    <div ng-view class="section" ng-class="animate"></div> 
    </div> 
    <!-- Display Only Screen < Small --> 
    <div class="visible-xs"> 
     <div ng-swipe-right="openSlide()"> 
     <div ng-view class="section" ng-class="animate"></div> 
     </div> 
</div> 

並在着陸。HTML

<div class="visible-xs" ng-include="'{{template path}}/desktop.html'" ></div> 
    <div class="hidden-xs" ng-include="'{{template path}}/mobile.html'" ></div> 

，並在配置

$routeProvider 
    .when(/,{ 
    templateUrl : "landing.html" 
    controller : "landingCtrl" 
    }); 

它的工作原理floawlessley我。它不是這樣。也許可能會有另一個使用純JS。這只是因爲我使用了boostrap而使用它，並且充分利用了它的優勢。

Answer 6

有點晚，但像你的頭，或導航控制器，你可以設置初始寬度：

angular 
    .module('myApp') 
    .controller('navCtrl', ['$rootScope', '$window', 
     function($rootScope, $window) { 
      $rootScope.is_mobile = ($window.innerWidth < 480); 

，如果你想在調整大小檢查，繼續將其綁定：

在你的HTML

$scope.$watch(function() { 
    return $window.innerWidth; 
}, function (innerWidth) { 
    $rootScope.safeApply(function() { 
     $rootScope.is_mobile = innerWidth < 480 // went with max device width 
    }); 
}); 

然後：

angular.element($window).bind('resize', function() { 
    $scope.$apply(); 
}); 

然後看着它

<div ng-if="$root.is_mobile">Show me only in mobile</div>