BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] AngularJS: ngRouteが動作しない。

2022-03-03 06:40:19

質問

この簡単なルーティングを動作させようとしているのですが、何が問題なのかがわかりません。

これがそのHTMLです。 

<html lang="en" ng-app="app">
     .
     .
     .  
     <a href="#voip">
       <div class="col-lg-3 service">
        <img src="assets/img/voip.svg"/>
        <h4 ng-bind-html="content.home.voip_header"></h4>
        <p ng-bind-html="content.home.voip_txt"></p>
      </div>
    </a>

    <section id="view">
      <div ng-view></div>
    </section>

これがルーティングです。 

var app = angular.module('app',[
  'ngRoute',
  'ngSanitize'
]);
    app.config(['$routeProvider',function($routeProvider){
      $routeProvider
      .when('/voip',{
        templateUrl:'assets/templates/voip.html'
      });
    }]);

以下のように'otherwise'を指定するとテンプレートが読み込まれます。href属性の構文がおかしいのかなと思ったのですが、いろいろ調べてみるとどうやらこういうことらしいです。 

      .otherwise({
       redirectTo:'/voip'
      })

もうひとつは、もし私が $routeChangeSuccess の場合、イベントはトリガーされますが、ビューはロードされません。

何か思い当たることはありますか？

解決方法は？

angular 1.6を使用していて、デフォルトのハッシュプレフィックスが変更されたためです。

<ブロッククオート

aa077e8 により、$location の hash-bang に使用されるデフォルトのハッシュプレフィックスが変更されました。 の URL は空文字列 ('') から bang ('!') に変更されました。もし HTML5モードを使用しない、または使用しないブラウザで動作するアプリケーションの場合 HTML5モードをサポートしておらず、独自の ハッシュプレフィックスを含むクライアント側URLには、プレフィックスとして! 例えば 例えば、mydomain.com/#/a/b/cのようなURLではなく、以下のようなURLになります。 mydomain.com/#!/a/b/c。

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

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

つまり、いくつかの選択肢があるということですね。

1. HTML5modeをtrueに設定する 

$locationProvider.html5Mode(true);

で、htmlのヘッダーにベースを設定します。 

<base href="/">

最後に変更 <a ng-href="#voip"> を 

<a ng-href="voip">

2. 1.6の方法を使用する
変更点
<a ng-href="#voip">
まで
<a ng-href="#!voip">

3. 1.5からの古い動作に戻る - ハッシュプレフィックスを手動で設定する 

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します