ASP.NET MVC에서 ui.router를 사용하여 AngularJS에서 페이지 새로 고침을 처리하는 방법

Question

우리는 클라이언트 쪽 라우팅을 위해 AngularJS ui.router를 사용하는 단일 페이지 ASP.NET MVC 응용 프로그램을 만듭니다.

현재 뒤로/앞으로 단추는 예상대로 작동하지만 사용자가 브라우저의 새로 고침 단추를 클릭하면 부분 페이지가 레이아웃 페이지없이로드됩니다. 예를 들어

:

1. 사용자가 탐색은 "http://localhost/MyApp/는"MVC는 레이아웃 페이지를 반환하고 우리는 기본 상태로 이동합니다.
2. 사용자가 페이지의 링크를 클릭 및 클라이언트 측 라우팅을 통해 특정 상태를 탐색하는 url은 브라우저의 새로 고침 버튼의 "http://localhost/MyApp/UserManagement/EditUser"
3. 사용자가 클릭, 그것은없이 "UserManagement/EditUser"부분보기로드 지금 레이아웃

사용자가 브라우저의 새로 고침 버튼을 클릭 할 때 레이아웃을 다시로드하려면 어떻게해야합니까?

public class RouteConfig 
{ 
    public static void RegisterRoutes(RouteCollection routes) 
    { 
     routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

     routes.MapRoute(
      name: "Default", 
      url: "{controller}/{action}/{id}", 
      defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
     ); 
    } 
} 

var baseFrameworkApp = angular.module("BaseFrameworkApp", ['ui.router']) 
    .config(['$stateProvider', '$httpProvider', '$locationProvider', '$urlRouterProvider', 
     function ($stateProvider, $httpProvider, $locationProvider, $urlRouterProvider) { 
      $locationProvider.hashPrefix("!").html5Mode(true); 
      $urlRouterProvider.otherwise("/"); 
      $stateProvider 
       .state('Default', { 
        url: '/{controller}/{action}', 
        views: { 
         "mainContainer": { 
          templateUrl: function (params) { return params.controller + '/' + params.action; } 
         } 
        } 
       }); 
     }]); 

Answer 1

귀하의 MVC RouteConfig.cs 파일은 주 구성으로

public class RouteConfig 
{ 
    public static void RegisterRoutes(RouteCollection routes) 
    { 
     routes.IgnoreRoute("{resource}.axd/{*pathInfo}"); 

     routes.MapRoute(
      name: "angular", 
      url: "{*.}", 
      defaults: new { controller = "Home", action = "Index"} 
     ); 

     routes.MapRoute(
      name: "Default", 
      url: "{controller}/{action}/{id}", 
      defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } 
     ); 
    } 
} 

가 내 상태를 구현하는 방법과 다른, 다음과 같이해야한다. 아래 예,

$urlRouterProvider.otherwise('/'); 
$locationProvider.html5Mode(true); 

$stateProvider 
.state('home', { url: '/', templateUrl: 'Angular/views/home.html', controller: '' }) 
.state('login', { url: '/login', templateUrl: 'Angular/views/account/login.html', controller: 'LoginController' }); 

나는이 도움이되기를 바랍니다.

Answer 2

먼저 URL을 ASP.NET 응용 프로그램에서 라우팅합니다. 각도 응용 프로그램을로드하려면 각 '다른'요청을 각도 응용 프로그램이있는 페이지로 리디렉션해야합니다.

당신은 web.config 파일에서이 작업을 수행 할 수 있습니다 :

<system.webServer> 
    <rewrite> 
     <rules> 
      <rule name="AngularJS Routes" stopProcessing="true"> 
       <match url=".*" /> 
       <conditions logicalGrouping="MatchAll"> 
        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> <!-- ignore stuf you don't want rerouted --> 
       </conditions> 
       <action type="Rewrite" url="/" /> 
      </rule> 
     </rules> 
    </rewrite> 
</system.webServer> 

Answer 3

당신은 UI 라우터 FAQ 좋은 설명을 찾을 수 있습니다. 구성 파일에 다시 쓰기 구성이 있습니다.

<system.webServer> 
    <rewrite> 
    <rules> 
     <rule name="Main Rule" stopProcessing="true"> 
     <match url=".*" /> 
     <conditions logicalGrouping="MatchAll"> 
      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />         
      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
     </conditions> 
     <action type="Rewrite" url="/" /> 
     </rule> 
    </rules> 
    </rewrite> 
</system.webServer>