web-dev-qa-db-ja.com

AngularJSでURL操作をオフにする

Angularを使用して最初のWebアプリを作成しようとしています。

通常モード（html5Modeオフ）では、Angularはアドレスのハッシュ部分を「パス」のように強制し（先頭に「/」を追加）、特殊文字をエンコードします-たとえばハッシュ内の単一の「？」と「＃」、およびその他を％3Fと％23で置き換えます。

この機能をオフにする方法はありますか？ $ locationProvider/$ routeProvider機能を使用したくない-自分でハッシュを解析したい（私の場合、ユーザーは「フリーテキスト」を入力します）ハッシュで私のウェブサイト内を検索します）。

RouteProviderは正規表現を使用するように構成できないと読みました...

HtmlModeがオンの場合、アドレスのハッシュ部分はパスのように見えるように強制されません（先頭に「/」がない）が、特殊文字はエンコードされます。

いずれにせよ、一部のブラウザーは特殊文字をエンコード/エスケープする可能性があることは承知していますが、ユーザーがアドレスバーに特殊文字を入力できた場合は、変更したくありません。

ありがとう

javascriptangularjsaddress-barlocation-providerroute-provider
45
Oren

これの副作用はわかりませんが、仕事は完了です。意図した場合でも、angularアプリからのすべての位置操作は無効になります。

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

64
greg.kindel

私はangular.jsのローカルコピーを使用しています。検索する

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

そして

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

対応する行をコメント化すると、angularjsはロケーションURLの変更を監視しなくなります。

5
Yang Zhang

私が正しく思い出した場合、Angularのルーティングは必須ではありませんが、コントローラーやビューなどのリロードに注意する必要があります。

1
Adam

@ 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 (...args) {
            if (ignoredPattern.test($window.location.hash)) return;
            originalOnUrlChange.apply($delegate, args);
        };
        let originalUrl = $delegate.url;
        $delegate.url = function (...args) {
            if (ignoredPattern.test($window.location.hash)) return $window.location.href;
            return originalUrl.apply($delegate, args);
        };
        return $delegate;
    }]);
}]);

Chrome 69、Firefox 62でテスト済み

AngularJS 1.7.4

1
Dragon