角度が適切にルーティングされていません。 URLはlocalhost：8081 /＃！/＃pageName

私は簡単なAngularアプリケーションを作成しています。このアプリケーションには、navbarアイテムが選択されたことに基づいてビューとして他のHTMLページをロードするindex.htmlがあります。ただし、ルーティングが期待どおりに機能していません。 main.htmlビューは正常にロードされますが、他のビューはロードされません。また、URLは予期したものではありません。角度が適切にルーティングされていません。 URLはlocalhost：8081 /＃！/＃pageName

アイテムが選択された後にブラウザに表示されるURLは、localhost:8081/#!/#pageNameです。私はどこに '！'から来て、pageNameの前にハッシュがあってはいけません。私は期待していたURLはlocalhost:8081/#/pageName

app.jsです：

'use strict'; 

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

app.config(function($routeProvider) {                
    $routeProvider 
     .when('/', { 
      templateUrl: 'views/main.html', 
      controller: 'MainCtrl' 
     }) 
     .when('/rankedLists', { 
      templateUrl: 'views/rankedLists.html', 
      controller: 'RankedListsCtrl' 
     }) 
     .when('/addGame', { 
      templateUrl: 'views/addGame.html', 
      controller: 'AddGameCtrl' 
     }) 
     .when('/contact', { 
      templateUrl: 'views/contact.html', 
      controller: 'ContactCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}); 

app.controller('MainCtrl', function($scope) { 
    $scope.message = 'THIS IS THE MAIN PAGE'; 
}); 
app.controller('RankedListsCtrl', function($scope) { 
    $scope.message = 'THIS IS THE RANKED LISTS PAGE'; 
}); 
app.controller('AddGameCtrl', function($scope) { 
    $scope.message = 'THIS IS THE ADD GAME PAGE'; 
}); 
app.controller('ContactCtrl', function($scope) { 
    $scope.message = 'THIS IS THE CONTACT PAGE'; 
});

のindex.html：

<!doctype html>                     
<html ng-app="videoGamesApp"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" href="styles/main.css"> 
     <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css"> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <header> 
     <nav class="navbar navbar-inverse"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="/">GAMING </a> 
       </div> 

       <ul class="nav navbar-nav"> 
        <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
        <li><a href="#rankedLists"><i class="fa fa-trophy"></i> Ranked Lists</a></li> 
        <li><a href="#addGame"><i class="fa fa-gamepad"></i> Add a Game</a></li> 
        <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
       </ul> 
       <div class="col-sm-3 col-md-3 pull-right"> 
        <form class="navbar-form" role="search"> 
         <div class="input-group"> 
          <input type="text" class="form-control" placeholder="Search" name="sr ch-term"> 
          <div class="input-group-btn"> 
           <button class="btn btn-default" type="submit"> 
            <i class="glyphicon glyphicon-search"></i> 
           </button> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </nav> 
    </header> 

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

    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-route/angular-route.js"></script> 
    <script src="scripts/app.js"></script> 
    </body> 
</html>

がなぜ他のビューがロードされていませんか？感嘆符はURLのどこから来ますか？ページ名の前にハッシュがあるのはなぜですか（私は2つではなく1つのハッシュが必要です）。

出典

2017-01-15 mwelk11

他のビューが読み込まれないのはなぜですか？
ビューが読み込まれない理由は、ルートにヒットしたためです。 1.6の角度を使用し、1.5からの動作を期待します。「（バンに

によりaa077e8に、 URLは空の文字列から変更された$場所ハッシュ強打のために使用されるデフォルトのハッシュプレフィックス（」）」：場所ハッシュプレフィックスに変更がありました！ '）。アプリケーションでHTML5モードが使用されていないか、またはがHTML5モードをサポートしていないブラウザで実行され、独自のハッシュプレフィックスが指定されていない場合、クライアント側のURLには！接頭辞。の例では、mydomain.com/#/a/b/cではなくURLは mydomain.com/#!/a/b/cになります。

あなたが実際にはハッシュ接頭辞を持たないようにしたい場合は、あなたがあなたのアプリケーションに構成ブロックを追加することにより、以前の動作を復元することができます。

appModule.config（[「$ locationProvider」、関数（$ locationProvider ）{
$ locationProvider.hashPrefix（ ''）;}]）; Source

1セットHTML5mode真

$locationProvider.html5Mode(true);

とHTMLヘッダーのHTMLセットベースで：

<base href="/">

最後<a ng-href="#pagename">背面に移動

<a ng-href="pagename">

にを変更1.5 - 手動でハッシュ接頭辞を設定する古い動作 これはあなたの質問に期待どおりにあなたのアプリを動作させるでしょう。

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

なぜページ名の前にハッシュはありますか？
リンクする方法は、ハッシュタグアンカータグとして扱われます。与えられたidで現在のdivにスクロールします。上記のいずれかの理由で問題を解決した場合、これも修正されます。

出典

2017-01-15 21:01:39

すばらしい説明をありがとう！あなたの最初の提案を使って作業しました。 – mwelk11

角度が適切にルーティングされていません。 URLはlocalhost：8081 /＃！/＃pageName

答えて

関連する問題