2015-03-03 3 views
1

Мне нужно предоставить внешний API-адрес обратного вызова, но они не поддерживают «#» в URL-адресе. Это не работает для нас, поскольку мы используем режим hashbang, а не html5.URL-адрес переадресации, чтобы содержать хэш-бланк перед обработкой

Мы используем ui-router для навигации между страницами, и я хотел бы знать, как я могу перехватить входящий URL-адрес (который не содержит хеш-бэнг) и вставить хеш-элемент до его обработки, чтобы пользователь мог перемещаться на правильную страницу.

Например: Если пользователь встречает «http://mySite/home», я хочу, чтобы иметь возможность перенаправить их на «http://mySite/#/home».

- Редактировать - После обмена с @Gaiazov ниже он выглядит так, как будто мне может понадобиться перенаправление на серверной стороне (а не переписывание) этого URL-адреса браузера. Как мне это сделать с Mvc?

ответ

0

Начните с URL-адреса сервера, переписывая вот так. Он перенаправит все URL-адреса на вашу угловую страницу с параметром запроса, содержащим исходный URL-адрес.

private const string ROOT_DOCUMENT = "/myapp.html?route="; 

protected void Application_BeginRequest(Object sender, EventArgs e) 
{ 
    string url = Request.Url.LocalPath; 
    if (!System.IO.File.Exists(Context.Server.MapPath(url))) 
    { 
     Context.RewritePath(ROOT_DOCUMENT + Context.Server.UrlEncode(Request.Url.PathAndQuery)); 
    } 
} 

Затем, в вашем приложении угловом

var app = angular.module('myApp', [ 
    'ui.router', 
]) 

app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) { 
    $stateProvider 
    .state('table', { 
     url: '/{table:products|customers}' 
    }) 
    .state('table.edit', { 
     url: '/edit/:id' 
    }) 
    .state('home', { 
     url: '/*path', // special 'catch all route', 
     template: "Home" 
    }); 

    var re = /^\?path=(.+)/i; 

    $urlRouterProvider.rule(function ($injector, $location) { 
    // what this function returns will be set as the $location.url 
    var path = window.location.search; 
    var matches = path.match(re); 
    if (matches) { 
     console.log(matches); 
     path = matches[1]; 
     return path; 
    } 
    }); 

    $urlRouterProvider.otherwise('/home'); 
}]); 

app.run(['$rootScope', '$state', function($rootScope, $state) { 
    $rootScope.$state = $state; 
}]) 
<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script> 
    <script data-require="[email protected]" data-semver="0.2.13" src="//rawgit.com/angular-ui/ui-router/0.2.13/release/angular-ui-router.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body ng-app="myApp"> 
    <h1>Hello Plunker!</h1> 

    <a href="#/products/edit/5">/products/edit/5</a><br/> 
    <a href="#/customers/edit/5">/customers/edit/5</a><br/> 
    <a href="#/not-a-table/edit/5">/not-a-table/edit/5</a><br/> 

    <a href="?path=/products/edit/5">?path=/products/edit/5</a> 
    <div ui-view=""></div> 

    <pre> 
     <!-- Here's some values to keep an eye on in the sample in order to understand $state and $stateParams --> 
     $state = {{$state.current.name}} 
     $params = {{$state.params}} 
     $stateParams = {{$stateParams}} 
     $state full url = {{ $state.$current.url.source }} 
    </pre> 
    </body> 

</html> 
+0

К сожалению, 'иначе()' подход не работает в моем случае. Он хорошо работает для всех URL-адресов, которые содержат хеш-бэнды, но не работает для конкретного случая, в котором у меня будет URL-адрес хэша. –

+0

Тогда похоже, что вам нужно переписать URL-адрес на стороне сервера. – gaiazov

+0

Хорошо, я использую 'HttpContext.Current.RewritePath', однако похоже, что это касается только виртуального пути, а не того, который вводится в браузере (который содержит« # »). Мне нужно изменить путь, который отображается в браузере. В противном случае этот подход работает только частично, потому что я могу видеть свою страницу, однако он отключен от моего javascript. –