角度不正確。 URL是localhost：8081 /＃！/＃pageName

我正在製作一個簡單的Angular應用程序，該應用程序具有一個index.html，它根據所選擇的navbar項目將其他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中來自哪裏？爲什麼在pageName之前有一個散列（我期望一個散列，而不是兩個散列）。

來源

2017-01-15 mwelk11

爲什麼其他視圖無法加載？
你的意見不加載的原因是因爲你擊中了路線。您使用1.6角度並期望1.5的行爲。目前已在位置哈希前綴的變化：

由於aa077e8，用於$位置散列砰默認哈希前綴網址已經從空字符串改變（「」）的感嘆號（」！'）。如果您的應用程序不使用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">

2.回去舊的行爲從1.5 - 手動設置哈希前綴 這將使您的應用按照您的問題期望工作。

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

爲什麼會出現在頁面名稱前的哈希？
您鏈接的方式被視爲哈希標籤錨標籤。這將滾動到具有給定ID的當前div。如果您因上述原因之一解決您的問題，則此問題將得到解決。

來源

2017-01-15 21:01:39

謝謝你的解釋！通過使用你的第一個建議得到它的工作。 – mwelk11

角度不正確。 URL是localhost：8081 /＃！/＃pageName

回答

相關問題