एंगुलरजेएस डेस्कटॉप या मोबाइल

Question

पर आधारित विभिन्न विचारों को मैं एक पृष्ठ वेबपैप के लिए AngularJS का उपयोग करना चाहता हूं। मुझे चिंता है कि क्या क्लाइंट मोबाइल या डेस्कटॉप है या नहीं, इस पर आधारित विभिन्न टेम्पलेट्स को "भेजने" का एक शानदार तरीका है। क्या ऐसा करने का कोई तरीका है? क्या यह अनुशंसा की जाती है कि वेब सर्वर "समझता है" ब्राउज़र क्या है और तदनुसार दृश्य भेजता है ताकि ब्राउजर हमेशा टेम्पलेट.html के लिए पूछता है या आप जावास्क्रिप्ट लिखते हैं ताकि ब्राउजर मोबाइल/टेम्पलेट.html प्राप्त करने के लिए वेबसर्वर को बताए?

Answer 1

मैं इसके साथ कैसे जाउंगा उपयोगकर्ता को एक टेम्पलेट प्रदर्शित करना और टेम्पलेट को उत्तरदायी बनाना। सिर्फ इसलिए कि आप AngularJS टेम्पलेट्स का उपयोग कर रहे हैं, मुझे कोई कारण नहीं दिख रहा है कि आप टेम्पलेट को उत्तरदायी क्यों नहीं बनाना चाहते हैं। मैं उस समाधान के लिए नहीं जाऊंगा जिसमें डिवाइस ब्राउज़र के आधार पर उपयोगकर्ता को एक अलग टेम्पलेट प्रदर्शित करना शामिल है।

जिसके अनुसार, एक ही रास्ता है कि मैं क्या करना होगा है:

1. वेब एप्लिकेशन है जो ब्राउज़र/डिवाइस को निर्धारित करता है की घर/लैंडिंग पृष्ठ के लिए एक सरल स्क्रिप्ट है करने के लिए। यह 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

उत्तरदायी डिजाइन छोटे क्षुधा के लिए अच्छी तरह से काम बल्कि गंदा हो जाता है जब आप बड़ा आवेदन करने के लिए आ जाएगा।

मैं व्यक्तिगत रूप से पृष्ठ लोड पर उपयोगकर्ता एजेंट का पता लगाने का सुझाव देता हूं, और यदि आवश्यक हो तो उसे एक अलग मोबाइल ऐप पर रीडायरेक्ट करना चाहता हूं। आप अभी भी दोनों ऐप्स के लिए अपने अधिकांश कोड बेस का उपयोग कर सकते हैं (बस व्यक्तिगत मॉड्यूल आयात करें)।

उपयोगकर्ता एजेंट का पता लगाने जावास्क्रिप्ट मैं इस समाधान का सुझाव का उपयोग करने में आपकी रुचि है (बस जावास्क्रिप्ट चयन करें): सबसे व्यापक समाधान मैंने पाया http://detectmobilebrowsers.com/ अब तक

Answer 3

यदि आप एक ही URL का उपयोग लेकिन दो की सेवा करना चाहता था एचटीएमएल के विभिन्न सेट (जैसे कि बड़ी छवियों और कुछ और के लिए inpage वीडियो बाहर स्वैप) मैं इस

'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 इस समस्या का समाधान की तरह कुछ करना होगा:

आपकी जांच कर सकतेपुस्तकालय। यह आकार में बहुत छोटा है लेकिन बहुत उपयोगी और सुरुचिपूर्ण है।

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

** ध्यान दें: इस bower install angular-media-queries साथ स्थापित किया गया है; हालांकि, जेएस फ़ाइल का मार्ग /path/to/library/angular-media-queries/match-media

Answer 5

बूस्टर का उपयोग करें। और यह आसानी से किया जा सकता है।

<!-- 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> 

और लैंडिंग में।एचटीएमएल

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

और config में

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

यह मेरे लिए floawlessley काम करता है। इसका रास्ता नहीं है। शायद शुद्ध जेएस का उपयोग कर एक और हो सकता है। यह बॉक्स के पॉट हुआ क्योंकि मैं बूस्ट्रैप का उपयोग कर रहा हूं और इसे अपने लाभ के लिए लाभ उठा रहा हूं।

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>