Question

我正在尝试使用Angular编写我的第一个Web应用程序。

在正常模式下（html5Mode关闭），Angular强制地址的哈希部分看起来像“路径”（添加前导“/”），并对特殊字符进行编码 - 例如，它允许单个“？”和散列中的“＃”并用％3F和％23替换其他。

有没有办法关闭此功能？我不想使用 $ locationProvider / $ routeProvider 功能 - 我想自己解析哈希（在我的情况下，用户会输入一些“自由文本”）在我的网站内搜索哈希值。）

我读到routeProvider无法配置为使用正则表达式...

如果打开htmlMode，那么地址的散列部分不会强制看起来像路径（没有前导“/”），但它仍然会编码特殊字符。

我知道有些浏览器可能会编码/转义特殊字符，但如果用户设法在其地址栏中输入一些特殊字符，那么我不想更改它。

由于

Answer 1

不确定这种副作用，但它完成了工作。请注意，它将禁用角度应用程序中的所有位置操作，即使是预期的。

angular.module('sample', [])
    .config( ['$provide', function ($provide){
        $provide.decorator('$browser', ['$delegate', function ($delegate) {
            $delegate.onUrlChange = function () {};
            $delegate.url = function () { return ""};
            return $delegate;
        }]);
    }]);

ES6变体：

angular.module('sample', [])
    .config(["$provide", $provide => {
        $provide.decorator("$browser", ["$delegate", $delegate => {
            $delegate.onUrlChange = () => { };
            $delegate.url = () => "";

            return $delegate;
        }]);
    }]);

在Chrome 30，IE9，IE10中测试过灵感来自https://stackoverflow.com/a/16678065/369724

Answer 2

我使用angular.js的本地副本。搜索

$browser.onUrlChange(function(newUrl, newState) {

和

$rootScope.$watch(function $locationWatch() {

注释掉相应的行并且angularjs将停止监视位置url的更改。

Answer 3

如果我没记错，Angular的路由不是强制性的，但是你必须注意重新加载控制器，视图等。

Answer 4

@ greg.kindel（已接受的解决方案）的解决方法对我不起作用。它引发了关于无限摘要循环的许多错误。我正在使用Angular 1.5.8。

我能够将解决方法调整为以下方法，以使事情正常进行。我希望它可以免除其他人的痛苦。

angular.module('sample', [])
  .config(['$provide', function ($provide) {
    $provide.decorator('$browser', ['$delegate', '$window', function ($delegate, $window) {
      $delegate.onUrlChange = function () {};
      //
      // HACK to stop Angular routing from manipulating the URL
      //
      // The url() function seems to get used in two different modes.
      //
      // Mode 1 - Zero arguments
      // There are no arguments given, in which case it appears that the caller is expected the
      // browser's current URL (a string response).
      //
      // Mode 2 - Three arguments
      // It receives three arguments (url, some_boolean, null).  It seems the caller is expecting
      // the browser's URL to be updated to the given value.  The result of this function call is
      // expected to be the $delegate itself, which will subsequently get called with no arguments
      // to check the browser's URL.
      //
      // The Hack:
      // We save the URL so that we can lie to the caller that the URL has been updated to what was
      // requested, but in reality, we'll do nothing to alter the URL.
      //
      var savedUrl = null
      $delegate.url = function (url, ...args) {
        if (!!url) {
          savedUrl = url;
          return $delegate;
        } else {
          return !!savedUrl ? savedUrl : $window.location.href;
        }
      };
      return $delegate;
    }]);
  }])

Answer 5

谢谢@ greg.kindel的回答，您可以帮助我找到解决锚问题的解决方案。这段代码让AngularJS应用忽略了一些哈希模式，使其像浏览器默认一样工作。我不需要启用html5Mode，并且ngRoute仍然可以工作。：）

app.config(['$provide', function ($provide) {
    $provide.decorator('$browser', ['$delegate', '$window', function ($delegate, $window) {
        // normal anchors
        let ignoredPattern = /^#[a-zA-Z0-9].*/;
        let originalOnUrlChange = $delegate.onUrlChange;
        $delegate.onUrlChange = function (newUrl, newState) {
            if (ignoredPattern.test($window.location.hash)) return;
            originalOnUrlChange.apply($delegate, arguments);
        };
        let originalUrl = $delegate.url;
        $delegate.url = function (url, replace, state) {
            if (ignoredPattern.test($window.location.hash)) return $window.location.href;
            return originalUrl.apply($delegate, arguments);
        };
        return $delegate;
    }]);
}]);

在Chrome 69，Firefox 62中进行了测试

AngularJS 1.7.4

关闭AngularJS中的URL操作

5 个答案: