ASP.NET MVC 4 Trasa do zakładek z zakrzywionymi adresami URL SPA

Question

Próbuję utworzyć aplikację jednokartkową w AngularJS z routingiem po stronie klienta wykonanym w trybie HTML5. W przypadku, gdy użytkownicy kiedykolwiek dodadzą zakładkę do strony w mojej witrynie, rozumiem, że potrzebuję prostego schematu routingu po stronie serwera, ale naprawdę chcę, aby zawsze wyświetlał moją pojedynczą stronę główną i propagował ten sam URL do elementu routingu po stronie klienta.

To catch-all trasa działa idealnie prostych adresów URL, które mają tylko jeden głęboka

routes.MapRoute(
    "Default", // Route name 
    "{*catchall}", // URL with parameters 
    new { controller = "Home", action = "Index" } // Parameter defaults 
); 

przykładowe adresy URL:

http://myapp.com/moreInfo 
http://myapp.com/contactUs 

"moreinfo" i "contactus" są po prostu nazwanych tras wewnątrz kątowa . Jedynym rzeczywistym punktem wejścia do aplikacji z jedną stroną jest http://myapp.com. Jak dotąd wszystko działa bardzo sprawnie.

Kiedy próbuję go głęboko więcej niż jedna droga, chociaż aplikacja przechodzi w nieskończonej pętli:

http://myapp.com/user/5 

Czy to dlatego, że mój server-side trasa nie jest wystarczające, aby „przejść” the " user/5 "URL do mojej aplikacji klienckiej? Czy muszę zrobić coś specjalnego, aby upewnić się, że bez względu na to, jak głęboko zagnieżdżony jest adres URL, zostanie on poprawnie przekazany do mojego SPA?

Answer 1

Problem nie dotyczy konfiguracji routingu, mam podobny układ z kątowymi js i mvc 4, a poniższa trasa działa dobrze.

routes.MapRoute(
    name: "Application", 
    url: "{*url}", 
    defaults: new { controller = "Home", action = "Index" }, 
    namespaces: new[] { "MyApp.Web.Controllers" }); 

Czy dla metody konfiguracji kątowej jest ustawiona wartość true dla właściwości html5Mode?

$locationProvider.html5Mode(true); 

Możesz spróbować wysłać prośbę o dodanie aplikacji do skrzypka i spojrzeć na odpowiedź. Jeśli jest to 301 lub 302, to masz problem z przekierowaniem po stronie serwera. Jeśli jest 200, to twój kod kątowy/js może być problemem.

Answer 2

Jeśli dobrze rozumiem, chcesz, aby "/ użytkownik/5" został podany do silnika trasowania w Angular. W takim przypadku Angular radzi sobie z trasą po haszowaniu. Oznacza to, że droga, którą chcę to

http://myapp.com#/user/5 

Potrzebny będzie również do skonfigurowania $ routeProvider poprawnie z trasy jak:

angular.module('yourApp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/user/:id', {templateUrl: 'SOME_HTML_FILE'}). 
     otherwise({redirectTo: '/'}); 
}]); 

Będziesz wtedy trzeba uzyskać param trasach w kontrolerze:

function someController($scope, $routeParams) { 
    if($routeParams.id){ 
     alert('Super Fly!'); 
    } 
}