W jaki sposób mogę uzyskać AngularJS działający z atrybutem FallbackRoute usługi ServiceStack w celu obsługi URL-i opartych na HTML pushstate?

Question

Buduję rozwiązanie klient/serwer, używając aplikacji pojedynczej strony AngularJS jako komponentu klienta i interfejsu RESTful API Self-Host ServiceStack jako komponentu serwera. Pojedynczy projekt aplikacji konsolowej programu Visual Studio zawiera pliki HTML i JavaScript dla składnika AngularJS, wraz z klasami C# do ładowania składnika ServiceStack AppHost (udostępniłem obowiązki interfejsu i usługi w celu oddzielenia projektów Visual Studio).

Ustawiłem wszystkie pliki HTML i JavaScript, aby uzyskać "Akcja kompilacji" "Brak" i "Katalog Kopiuj do wyjścia" w "Kopiuj, jeśli jest nowsza".

Wszystko działa bardzo dobrze, o ile jestem gotów zaakceptować "#" w adresach URL mojej witryny. Chciałbym to wyeliminować, używając adresów URL z pushstate HTML5.

Skutecznie oznacza to, że muszę przekonać serwis ServiceStack, aby wyświetlił moją domyślną stronę powłoki HTML strony pojedynczej za każdym razem, gdy żądana jest nieistniejąca trasa. Istnieje teraz atrybut FallbackRouteavailable in ServiceStack, który wydaje się być dokładnie dodany do tego celu.

Jednak nie jestem pewien, jak z niego korzystać. Znalazłem ludzi zadających podobne pytania here, here i here. Ale podane odpowiedzi były wszystkie przed pojawieniem się nowego atrybutu FallbackRoute.

Zasadniczo szukam prostego, ale kompletnego przykładu użycia atrybutu FallbackRoute, aby zapewnić, że wszelkie żądania dotyczące nieistniejących tras są przekierowywane na pojedynczą statyczną stronę HTML.

Answer 1

okazuje się, że to wszystko jest bardzo proste z funkcjonalnością FallbackRoute, gdy wyszło jak użyj go prawidłowo:

[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"}; 
     } 
    } 

Kiedy to się pojawi, stwierdzam, że "index.html" rzeczywiście pojawia się, gdy próbuję trafić w nieistniejącą trasę.

Wszystkie statyczne pliki, takie jak zasoby JavaScript i CSS, są wyświetlane normalnie (pod warunkiem, że mają oczywiście ustawienie "Kopiuj do wyjściowego katalogu" w opcji "Kopiuj, jeśli jest nowsza").

Działa to jak czar z funkcją Push-state HTML5 w AngularJS.

Answer 2

Wykonanie RazorRockstars.Web. Będę go zmodyfikować, aby użyć ścieżki wieloznaczny i widok domyślny:

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

Ponieważ jest to usługa wymaga Odsłona (details here), a nie zawartości strony.

W przykładzie RockStars nie mogę określić, jaki widok zostanie wyrenderowany dla FallBackResponse, ale ustawienie widoku jawnie powinno być wszystkim, czego potrzebujesz. Atrybut

Dodany do metody mapuje odpowiedź na plik Widoki/Index.cshtml. Plik Index.cshtml może być pusty, ale o stwierdzenie szablon i kompletnego znaczników dla pojedynczej aplikacji strona może być w pliku szablonu (tj _Layout.cshtml)

Bez Razor

Czytaj html na ciąg znaków i zwraca go, podczas gdy ustawienie typu zawartości do „text/html” z atrybutem, zobacz 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; 
    } 
    // ... 
}