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

98

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

ここで何が問題になるのでしょうか？手伝ってくれてありがとう

— 阿波メルバイン
ソース

1

おそらく関連していますか？github.com/angular/angular.js/commit/...

— Claies

172

単にhrefbang #!をhrefで使用してください：

 <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

— ジョージ
ソース

16

馬に乗ってごめんね…でも、どうやってリリースされたの？これは巨大な、重大なバグです。

— MiloTheGreat 2017年

2

@MiloTheGreatは、AngularJSチーム（github.com/angular/angular.js/issues/15715

— georgeawg

39

単純に含める!にhref：

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

— v-tec
ソース

7

ルーティングに関する非推奨のチュートリアルを実行した後、何時間も無駄に費やしました。欠けていたのは「！」だけでした。ありがとうございました！

— Philippe Maes

ハッシュとハッシュバンに関するすべてのジャンポマンポで、「！」参照なしで表示される違法な文字のようです。そして、それを受け入れて、その存在を認めれば、問題は解決されたでしょう。

— Mohammed Joraid 2017年

私も...これは私を夢中にさせていました！

— VictorEspina 2017

6

1.6.4でルーティングを機能させることができなかったので、角度1.5.11を使用することを決定しました。

古いバージョンのangularに固執することがあなたにとっての選択肢であるなら、それはあなたの神経を救うかもしれないのでそれを考慮してください...

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"
});
});

— リクソン
ソース

1.5に留まると、Angular 2/3/4/5などへのアップグレードにどのような影響がありますか？ngUpgradeは1.5から2+まで機能しますか？ngUpgradeは私たちには実行できないかもしれません。（ええ、このコメントはほとんど見えず、風にハウリングします）

— eflat

0

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

— プラナヴVR
ソース

0

これを試してみてください...

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('');
     });

— マニカンタン
ソース