web-dev-qa-db-ja.com

angularjs 1.6.0（最新）ルートが機能していない

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

私は現在取り組んでいる基本的なプロジェクトを持っていますが、これまでに行ったことがすべて正しいとしても、ルートは機能しないようです。

私は私のindex.htmlファイルにこの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

ここで何が問題になりますか？手伝ってくれてありがとう

angularjsangular-routingngrouteangularjs-ng-routeangularjs-1.6
95
Awa Melvine

Hrefにhashbang #!を使うだけです。

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

aa077e8 が原因で、$ location hash-bang URLに使用されるデフォルトのハッシュプレフィックスが空の文字列（''）からbang（'!'）に変更されました。

実際にハッシュ接頭辞を付けたくない場合は、アプリケーションに設定ブロックを追加することで以前の動作を復元できます。

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

詳細については、

あの馬に乗ってすみません...でもどうやってこれが解放されたのですか？これは巨大な、壊れるバグです。 - @ MiloTheGreat

＃14202による重大な変更は、参照仕様がすでに正式に廃止された＃15715であるため元に戻す必要があります

私たちはフィードバックを得ていないので、この問題を解決します。あなたが新しいフィードバックを提供できる場合は、この問題をもう一度開いてください。

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

165
georgeawg

!をhrefに含めるだけです。

<body>
    <a href="#!/add-quote">Add Quote</a>
    <div ng-view ></div>
</body>
39
v-tec

1.6.4ではルーティングがうまく行かなかったので、Angular 1.5.11を使うことにしました。ルーティングはうまくいきます。

角度の古いバージョンに固執することはあなたのためのオプションである場合それはあなたの神経を救うかもしれないのでそれを検討してください...

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

app.config(function($routeProvider) {
$routeProvider
.when("/layoutandviewbox", {
    templateUrl : "views/layout-and-viewbox.html"
})
.when("/basicshapes", {
    templateUrl : "views/basic-shapes.html"
})
.when("/advancedshapes", {
    templateUrl : "views/advanced-shapes.html"
})
.when("/groups", {
    templateUrl : "views/groups.html"
})
.when("/transformations", {
    templateUrl : "views/transformations.html"
})
.when("/effects", {
    templateUrl : "views/effects.html"
})
.when("/", {
    templateUrl : "views/basic-shapes.html"
});
});
5
lixonn

これを試してみると役に立つかもしれません...

HTMLまたはビューのページ

 <body>
       <a href="#/Home.html">Home</a>
       <div ng-view></div>
 </body>

スクリプトページ

var app=angular
.module('myModule',['ngRoute'])
.config(function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/Home', {
      templateUrl: 'FolderName/Home.html',
      controller: 'homeCtr'
    })
      $locationProvider.hashPrefix('');
     });
0
Manikantan
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.hashPrefix('');
  $routeProvider
    .when('/add-quote', {
      templateUrl: 'views/add_quote.html',
      controller: 'QuoteCtrl'
    })
    .otherwise({ redirectTo: '/' });
}]);
0
Pranav V R