我需要为外部 API 提供回调 URL，但它们不支持 URL 中的“#”。这对我们不起作用，因为我们使用的是 hashbang 模式而不是 html5 模式。
我们正在使用 ui-router 在页面之间导航，我想知道如何拦截传入的 URL（不包含 hashbang）并在处理之前插入 hashbang，以便用户可以导航到正确的页面。
例如： 如果用户遇到“http://mySite/home”，那么我希望能够将他们重定向到“http://mySite/#/home”。
-- 编辑-- 在与下面的@Gaiazov 交换后，我可能需要此浏览器 URL 的服务器端重定向（而不是重写）。我将如何使用 Mvc 做到这一点？
【问题讨论】：
标签： angularjs angular-ui-router hashbang
从这样的服务器端 url 重写开始。它将使用包含原始 url 的查询参数将所有 url 重定向到您的 angular 页面。
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));
}
}
然后，在你的 Angular 应用中
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="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<script data-require="ui-router@0.2.13" 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>
【讨论】：
otherwise() 方法在我的情况下不起作用。它适用于所有包含 hashbang 的 URL，但不适用于我需要的 URL 没有 hashbang 的特定情况。
HttpContext.Current.RewritePath，但看起来这只处理虚拟路径，而不是在浏览器中输入的路径（包含“#”）。我需要能够修改在浏览器中看到的路径。否则，这种方法只能部分起作用，因为我可以看到我的页面，但是它与我的 javascript 断开了连接。