1. ホーム
  2. angularjs

[解決済み] angularjs 1.6.0 (最新) のルートが動作しない

2023-02-01 13:31:06

質問

私はStackoverflowでこの質問を見ることを期待していたのですが、そうではありませんでした。どうやらこの問題は私だけが抱えているようで、非常によくあることのようです。

私は基本的なプロジェクトに取り組んでいますが、私がこれまでに行ったすべてが正しいように見えるにもかかわらず、ルートが動作しないようです。

私はこのhtmlの部分を私の index.html ファイル内にあります。

<html>
<head ng-app="myApp"> 
    <title>New project</title>
    <script src="https://code.angularjs.org/1.6.0/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.0/angular-route.min.js"></script>

    <script src="app.js"></script>
</head>
<body>
    <a href="#/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
</html>

そして、これが私の app.js :

var app = angular.module('myApp', ['ngRoute']);


app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/add-quote', {
            templateUrl: 'views/add_quote.html',
            controller: 'QuoteCtrl'
        })
        .otherwise({ redirectTo: '/' });
}]);

今、私がちょうどページにアクセスしたとき、私はURLで取得したものは次のとおりです。

http://localhost:8000/admin#!/

をクリックすると Add quote ボタンをクリックすると、このようになります。

http://localhost:8000/admin#!/#%2Fadd-quote

何が問題なのでしょうか? ありがとうございました。

どのように解決するのですか?

単純にハッシュバンを使う #! を指定します。

 <a href="#!/add-quote">Add Quote</a>


により aa077e8 のため、$location ハッシュバン URL で使われるデフォルトのハッシュプレフィックスが、空の文字列 ( '' ) から bang ( '!' ).

実際にハッシュプレフィックスを付けないようにしたい場合は、アプリケーションに設定ブロックを追加することで、以前の動作を復元することができます。

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix('');
}]);

詳細については


偉そうなことを言って申し訳ないのですが......。これはどのようにしてリリースされたのでしょうか? これは大規模な、壊れるようなバグです。- @MiloTheGreat

<ブロッククオート

参照仕様がすでに公式に非推奨となっているため、#14202によるブレークチェンジは戻されるべきです #15715

フィードバックがないため、この問題を閉じます。新しいフィードバックを提供できる場合は、この問題を再オープンしてください。

- https://github.com/angular/angular.js/issues/15715#issuecomment-281785369