मैं एचटीएमएल 5 पुशस्टेट यूआरएल का समर्थन करने के लिए सर्विसस्टैक फ़ॉलबैक रूट विशेषता के साथ काम कर रहा AngularJS कैसे प्राप्त कर सकता हूं?

Question

मैं क्लाइंट घटक के रूप में एक कोणीय जेएस सिंगल पेज ऐप का उपयोग करके क्लाइंट/सर्वर समाधान का निर्माण कर रहा हूं और सर्वर घटक के रूप में एक स्व-होस्ट सर्विसस्टैक रीस्टफुल एपीआई का उपयोग कर रहा हूं। एक एकल विजुअल स्टूडियो कंसोल एप्लिकेशन प्रोजेक्ट में AngularJS घटक के लिए एचटीएमएल और जावास्क्रिप्ट फाइलें हैं, साथ ही सर्विसस्टैक ऐपहोस्ट बूटस्ट्रैप करने के लिए सी # कक्षाओं के साथ (मैंने विजुअल स्टूडियो प्रोजेक्ट को अलग करने के लिए इंटरफ़ेस और सेवा जिम्मेदारियां विकसित की हैं)।

मैंने सभी HTML और जावास्क्रिप्ट फ़ाइलों को 'कोई नहीं' की 'बिल्ड एक्शन' और 'नई अगर कॉपी करें' की 'आउटपुट निर्देशिका में कॉपी करें' सेट करने के लिए सेट किया है।

सब कुछ बहुत अच्छी तरह से काम कर रहा है जब तक कि मैं अपनी साइट यूआरएल में '#' रखने के लिए तैयार हूं। मैं एचटीएमएल 5 पुशस्टेट यूआरएल का उपयोग करके इसे खत्म करना चाहता हूं।

प्रभावी रूप से इसका मतलब है कि जब भी एक अस्तित्वहीन मार्ग का अनुरोध किया जाता है तो मुझे अपने डिफ़ॉल्ट सिंगल पेज ऐप HTML शैल पृष्ठ की सेवा करने के लिए सर्विसस्टैक को मनाने की आवश्यकता है। अब FallbackRoute विशेषता available in ServiceStack है जो इस उद्देश्य के लिए बिल्कुल जोड़ा गया प्रतीत होता है।

हालांकि, मुझे यकीन है कि इसका उपयोग कैसे किया जाए। मैंने लोगों को समान प्रश्न पूछने वाले here, here और here से पूछे हैं। लेकिन दिए गए उत्तर नए FallbackRoute विशेषता के आने से पहले थे।

अनिवार्य रूप से, मैं एक सरल, अभी तक पूर्ण उदाहरण की तलाश कर रहा हूं कि फॉलबैक रूट विशेषता का उपयोग कैसे किया जाए ताकि यह सुनिश्चित किया जा सके कि गैर-मौजूदा मार्गों के किसी भी अनुरोध को एक स्थिर HTML पृष्ठ पर रीडायरेक्ट किया गया हो।

Answer 1

देख ऐसा लगता है कि यह सब FallbackRoute कार्यक्षमता के साथ बहुत आसान है, एक बार आप कैसे करने के लिए बाहर काम इसे सही तरीके से उपयोग करें:

[FallbackRoute("/{Path*}")] 
    public class Fallback 
    { 
     public string Path { get; set; } 
    } 

    public class FallBackService : Service 
    { 
     public object Any(Fallback request) 
     { 
      return new HttpResult(new FileInfo("index.html")) {ContentType = "text/html"}; 
     } 
    } 

एक बार यह जगह हो जाने पर, मुझे लगता है कि जब भी मैं एक अस्तित्वहीन मार्ग को मारने की कोशिश करता हूं तो मुझे 'index.html' वास्तव में सेवा मिल रही है।

जावास्क्रिप्ट और सीएसएस संसाधनों जैसी कोई भी स्थिर फाइलें सामान्य के रूप में कार्य की जाती हैं (जब तक उनके पास 'नई स्थिति' की प्रतिलिपि 'आउटपुट निर्देशिका की प्रतिलिपि' सेटिंग होती है)।

यह AngularJS में HTML5 पुश-स्टेट कार्यक्षमता के साथ एक आकर्षण की तरह काम करता है।

Answer 2

RazorRockstars.Web एक कार्यान्वयन है।

[FallbackRoute("/{Path*}")] 
public class Fallback 
{ 
    public string Path { get; set; } 
    public string PathInfo { get; set; } 
} 

public class RockstarsService : Service 
{ 
    [DefaultView("Index")] 
    public object Any(Fallback request) 
    { 
     request.PathInfo = base.Request.PathInfo; 
     return request; 
    } 
    // ... 
} 

चूंकि यह एक सेवा है कि यह एक दृश्य पेज (details here) के बजाय किसी सामग्री पृष्ठ की आवश्यकता है: मैं एक वाइल्डकार्ड पथ और एक डिफ़ॉल्ट दृश्य का उपयोग करने के लिए इसे संशोधित करेंगे।

रॉकस्टार उदाहरण में, मैं यह निर्धारित नहीं कर सकता कि FallBackResponse के लिए कौन सा दृश्य प्रस्तुत किया जाएगा, लेकिन दृश्य को स्पष्ट रूप से सेट करना चाहिए जो आपको चाहिए।

[DefaultView("Index")] विशेषता मैंने Any विधि में जोड़ा है जो दृश्य/अनुक्रमणिका.cshtml फ़ाइल के जवाब को मानचित्र बनाता है। (यानी _Layout.cshtml) Index.cshtml फ़ाइल खाली हो सकती है, लेकिन एक टेम्पलेट घोषणा, और अपने ही पृष्ठ अनुप्रयोग के लिए पूरा मार्कअप के लिए अपने टेम्पलेट फ़ाइल में हो सकता है

उस्तरा बिना

एचटीएमएल पढ़ें एक स्ट्रिंग में और इसे वापस, एक विशेषता के साथ "text/html" के लिए सामग्री प्रकार सेट करते समय, wiki docs on service return types

public class RockstarsService : Service 
{ 
    static string readContents; 

    [AddHeader(ContentType = "text/html")] 
    public string Any(Fallback request) 
    { 

     // check timestamp for changes for production use 
     if (readContents == '') { 
      using (StreamReader streamReader = new StreamReader(pathFromConfigFile, Encoding.UTF8)) 
      { 
       readContents = streamReader.ReadToEnd(); 
      } 
     } 
     return readContents; 
    } 
    // ... 
}