फोनगैप और कोणीय जेएस

Question

के साथ एचटीएमएल 5 मोड मैं AngularJS html5 मोड (सत्य) फोनगैप के साथ काम करने की कोशिश कर रहा हूं। मैं इस पोस्ट करने के लिए, मैं विन्यास के विभिन्न संयोजन की कोशिश की पहले, < आधार/> मेटा में टैग (भी < आधार href के साथ की कोशिश की = "जोड़ने से खोज की एक बहुत कुछ किया"/>, < आधार href = "/"/> और < आधार href = "/" target = "_ स्वयं"/>), , मार्ग अंतिम बिंदुओं को .html प्रत्यय जोड़ने $ delegate.history जोड़ने = false (अनुसरण) की तरह .config ब्लॉक के अंदर

$provide.decorator('$sniffer', function($delegate) { 
    $delegate.history = false; 
    return $delegate; 
}); 

और स्पष्ट रूप से

$locationProvider.hashPrefix('!'); 
$locationProvider.html5Mode(true); 

लेकिन इसे काम करने का कोई तरीका नहीं है, टैग को जोड़ने और एचटीएमएल 5 मोड को सत्य में सेट करने के परिणामस्वरूप आवेदन शुरू होने पर रिक्त स्क्रीन होगी। इसके अलावा उनमें से एक को एक ही परिणाम, रिक्त स्क्रीन पर लाएगा।

के साथ आधार टैग को जोड़ने से "android_asset"

का पालन सही ढंग से कर देगा मुख्य नियंत्रक लोड लेकिन फिर मार्ग टूट जाता है की तरह ....

लक्ष्य विशेषता को "_blank" और "_self साथ परीक्षण किया गया "मूल्य ...

तो मेरा सवाल है, क्या फोन 5 और फोनुलैप और एंगुलरजेएस का उपयोग कर एचटीएमएल 5 मोड सक्षम किया जा सकता है?

मैं AngularJS 1.2.16 के साथ कॉर्डोबा संस्करण 3.4.1-0.1.0, 4.0.4 वास्तविक डिवाइस एंड्रॉयड पर परीक्षण किया और एंड्रॉयड 4.4.2 AVD

किसी भी सलाह बहुत सराहना की जाएगी उपयोग कर रहा हूँ! धन्यवाद

Answer 1

मेरे अनुभव के आधार पर और रेमंड कैमडेन (जो फोनगैप पर काम करता है) से this comment पर फोनगैप + कोणीय के साथ html5mode का उपयोग करना संभव नहीं है।

Answer 2

किसी मौजूदा वेबसाइट के साथ इस समस्या को हल करने के लिए, मैं बिल्ड समय पर एक कोणीय स्थिरता जोड़ता हूं जो इंगित करता है कि बिल्डिंग फोनगैप के लिए है या नहीं। कॉन्फ़िगरेशन समय पर आप स्थिरांक तक पहुंच सकते हैं और HTML5mode लागू करना चुन सकते हैं।

//Add this portion via your build scripts e.g. grunt or gulp 
//make the constant change depending on if this is a Phonegap build or not 
angular.module('myAppConstants', []).constant('PhonegapConstant', true); 

//How to use 
angular.module('myApp', ['myAppConstants']).config(function(
    $locationProvider, 
    PhonegapConstant 
) { 
    if(!PhonegapConstant) { 
     $locationProvider.html5mode(true); 
     $locationProvider.hashPrefix('!'); 
    } 
}); 

Answer 3

मैं सिर्फ यह मिल गया है AngularJS 1.5, नए घटक रूटर के साथ काम करने, और कॉर्डोबा (phonegap) 6.0।

1. अपने html फ़ाइल से <base href="/"> टैग निकालें:

   इसकी एक सा hacky, लेकिन यहाँ मैं करना था क्या।

2. सेट एचटीएमएल 5 मोड झूठी

को requireBase सेट करते समय

$locationProvider.html5Mode({ enabled: true, requireBase: false });

1. पकड़ने कॉर्डोबा (phonegap) मार्गों

   // iOS Cordova catcher 
   // 
   { 
       path: '/var/**', 
       component: 'cordova' 
   }, 
   // Android Cordova catcher 
   // 
   { 
       path: '/android_asset/www/index.html', 
       component: 'cordova' 
   } 
   

2. एक कॉर्डोबा बनाओ घटक जो तब भी आप जहां भी चाहें reroutes।

   if(cookieService.loggedIn()) { 
        $rootRouter.navigate(['Newsfeed']); 
       } 
       else { 
        $rootRouter.navigate(['Title']); 
       } 
   

अब आप अपने मार्गों के बाकी आप सामान्य रूप से उपयोग कर सकते हैं। मैं इस विधि के साथ एक मुद्दे के खिलाफ आया था, हालांकि, मेरी सभी स्थानीय छवियों और svgs को एंड्रॉइड के लिए पूर्ण पथ,/android_asset/www/images से शुरू करने की आवश्यकता है, इसलिए मैंने थोड़ा फ़िल्टर बनाया जो उचित संपत्ति पथ को थकाता है वेब, एंड्रॉइड, और आईओएस।