5

クライアントコンポーネントとしてAngularJS Single Page Appを使用し、サーバーコンポーネントとしてSelf-Host ServiceStack RESTful APIを使用して、クライアント/サーバーソリューションを構築しています。単一のVisual Studioコンソールアプリケーションプロジェクトには、AngularJSコンポーネント用のHTMLおよびJavaScriptファイルと、ServiceStack AppHostのブートストラップ用のC#クラス(Visual Studioプロジェクトを分離するためのインターフェイスとサービスの責任を委譲しています)があります。HTML5 pushstate URLをサポートするために、ServiceStack FallbackRoute属性で動作するAngularJSを取得するにはどうすればよいですか?

すべてのHTMLファイルとJavaScriptファイルに「ビルドアクション」が「なし」、「出力ディレクトリにコピー」が「それ以上コピーする」に設定されています。

サイトのURLに「#」を付けて準備している限り、すべてがうまく機能しています。私はHTML5 pushstate URLを使用してこれを排除したいと思います。

実際には、存在しないルートが要求されるたびに、デフォルトのシングルページアプリケーションのHTMLシェルページを提供するようにServiceStackを説得する必要があります。この目的のために正確に追加されたと思われるFallbackRoute属性available in ServiceStackがあります。

ただし、使用方法がわかりません。私は同様の質問hereherehereを求める人々を見つけました。しかし、新しいFallbackRouteアトリビュートが到着する前に、答えはすべてでした。

本質的に、FallbackRoute属性を使用して、存在しないルートへのリクエストが単一の静的HTMLページにリダイレクトされるようにする方法の簡単で完全な例を探しています。

答えて

3

を見ます正しく使用してください:

[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'が実際に配信されています。

JavaScriptやCSSリソースなどの静的ファイルは、通常は「出力ディレクトリにコピーする」設定が「新しい場合はもちろんコピー」という設定になっている限り、機能します。

これは、AngularJSのHTML5プッシュ状態機能を持つ魅力のように機能します。

3

RazorRockstars.Webには実装があります。これは、それがビューページ(details here)ではなく、コンテンツページを必要とするサービスであるので

[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; 
    } 
    // ... 
} 

:私は、ワイルドカードパスとデフォルトのビューを使用するように変更します。

RockStarsの例では、どのビューがFallBackResponseにレンダリングされるのかを判断できませんが、明示的にビューを設定するだけで十分です。

Anyメソッドに追加した属性は、レスポンスをViews/Index.cshtmlファイルにマップします。 Index.cshtmlファイルを空にすることができますが、テンプレート宣言し、あなたの単一ページのアプリケーションのための完全なマークアップのためのテンプレートファイルにすることができ(すなわち_Layout.cshtml)のhtmlを読む

レイザーなし

文字列に属性を持つ「text/htmlの」へのコンテンツタイプを設定しながら、それを返す、それはあなたがどのようにうまくたら、それは、すべてのFallbackRoute機能を備えた非常にシンプルですが判明し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; 
    } 
    // ... 
} 
+0

これはすべて非常にクールです。しかし、もし私がそうする必要がなければ、Razor Pluginを追加する必要はありません。私は単一の静的なHTMLページを使用しています。フォールバックルートを追加するためだけに、Razorテンプレートエンジンを追加する必要があると思われます。 – Holf

+0

「剃刀なし」のオプションを追加しました –

+0

非常にいいですね...後で試してみましょう。ありがとう! – Holf

関連する問題