URL перенаправления, чтобы содержать hashbang перед обработкой

Мне нужно предоставить внешнему API URL обратного вызова, однако они не поддерживают "#" в URL. Это не работает для нас, так как мы используем режим hashbang, а не режим html5.

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

Например: если пользователь встречает " http://mysite/home", то я хочу иметь возможность перенаправить его на " http://mysite/".

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

Источник

1 ответ

Начните с перезаписи 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="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>
Источник
Другие вопросы по тегам