當我使用$ locationProvider.html5Mode（true）;頁面不能以角度工作

我想從URL中刪除＃所以我使用了$ locationProvider.html5Mode（true）;爲刪除網址，但當我使用$ locationProvider.html5Mode（true）;頁面未打開且無法正常工作。

當我刪除$ locationProvider.html5Mode（true）;頁面正常工作，＃在地址欄中顯示。

代碼

<!DOCTYPE HTML> 
<html> 
<head> 
<title>route in angular</title> 
<style> 
html, body { 
    height:100%; 
} 
header { 
    background-color: #cb003e; 
    overflow: hidden; 
    text-align: center; 
} 

.sidebar { 
    background: rgba(20, 20, 20, .3); 
    /* width: 100px; */ 
    height: 100%; 
    /* left: 0; */ 
    float: left; 
    display: inline-block; 
    position: fixed; 
} 

.main { 
    height: 500px; 
    display: table; 
} 

footer { 
    background-color: #cb003e; 
    clear: both; 
} 

</style> 
<link rel="stylesheet" href="bootstrap.min.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 

<base href="/" /> 
</head> 
<body ng-app="myApp"> 


<header> 
    <h1>Header</h1> 
</header> 

<main> 
    <div class="col-lg-3 col-md-3 col-sm-3"> 
     <div class="sidebar"> 
     <ul> 
      <li><a href="/home">Home</a></li> 
      <li><a href="/about">About</a></li> 
      <li><a href="/project">Project</a></li> 
      <li><a href="/contact">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
    <div class="col-lg-9 col-md-9 col-sm-9 main"> 
      <div ng-view></div> 
    </div> 
</main> 

<footer class="text-center;"> 
    <h1 class="text-center">Footer</h1> 
</footer> 
<script> 
var app = angular.module("myApp", ["ngRoute"]); 
app.config(function($routeProvider, $locationProvider) { 
    $routeProvider 
    .when("/home", { 
     templateUrl : "home.html" 
    }) 
    .when("/about", { 
     templateUrl : "about.html" 
    }) 
    .when("/project", { 
     templateUrl : "project.html" 
    }) 
    .when("/contact", { 
     templateUrl : "contact.html" 
    }) 

    .when("/inder", { 
     templateUrl : "contact.html" 
    }) 

    .otherwise({ 
     templateUrl : "home.html" 
    }); 

    $locationProvider.html5Mode(true); 
}); 


</script> 

</body> 
</html>

來源

2017-04-25 Inderjeet

我不確定。您可能需要爲您的解決方案文件夾名稱（即）提供基本URL。如果它不起作用，那麼讓我知道你所得到的控制檯錯誤。 –

@ImmanuelKirubaharanS我的所有頁面都在文件夾之外，所以根據我我不需要提供任何文件夾名稱 – Inderjeet

您正在運行此應用程序的哪個瀏覽器？它可能不支持'html5Mode'依賴的'history' api，如果它不被支持，它會回退到哈希前綴的url。 –

是否使用.htaccess？如果沒有路由可能無法正常工作。

Options +FollowSymLinks 
RewriteEngine on 
    RewriteCond %{REQUEST_FILENAME} -s [OR] 
    RewriteCond %{REQUEST_FILENAME} -l [OR] 
    RewriteCond %{REQUEST_FILENAME} -d 
    RewriteRule ^.*$ - [NC,L] 

    RewriteRule ^(.*) /index.html [NC,L]

來源

2017-06-16 12:45:51 Nasuh

當我使用$ locationProvider.html5Mode（true）;頁面不能以角度工作

回答

相關問題