Fatal编程技术网
  • javascript/
  • Javascript AngularJS HTML5模式有问题

Javascript AngularJS HTML5模式有问题

javascript angularjs .htaccess

Javascript AngularJS HTML5模式有问题,javascript,angularjs,.htaccess,base-url,pretty-urls,Javascript,Angularjs,.htaccess,Base Url,Pretty Urls,我目前在AngularJS HTML5模式方面遇到了问题。我正在一个博客网站上工作，该网站位于我的本地主机WAMP服务器上。我在index.html文件中定义了一个基本URL，在app.js文件的config部分中将html5Mode设置为true，在我的目录中还有一个.htaccess文件 这就是我的url在没有启用html5模式的情况下的样子。 如果我像这样加载我的站点： 本地主机/博客/ 或 localhost/Blog/index.html它将重新调用 到 localhost/Blog

我目前在AngularJS HTML5模式方面遇到了问题。我正在一个博客网站上工作，该网站位于我的本地主机WAMP服务器上。我在index.html文件中定义了一个基本URL，在app.js文件的config部分中将html5Mode设置为true，在我的目录中还有一个.htaccess文件

这就是我的url在没有启用html5模式的情况下的样子。

如果我像这样加载我的站点： 本地主机/博客/ 或 localhost/Blog/index.html它将重新调用 到 localhost/Blog/posts，这就是我想要的

但是，如果我尝试手动键入此url或刷新页面，它将转到localhost/dashboard，如果我单击其他链接之一，它将转到 localhost/nameOfLink

我不是100%确定，但我认为问题可能出在.htaccess文件中

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
这是我的index.html文件

<!DOCTYPE html>
<html lang="en" ng-app="blog" class="no-js" ng-cloak>
<head>
    <base href="/Blog/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#29B6F6">
    <meta name="msapplication-navbutton-color" content="#29B6F6">
    <meta name="apple-mobile-web-app-status-bar-style" content="#29B6F6">
    <title>Phone reviews</title>
    <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
    <link rel='stylesheet' id='primary-font-css'  href='http://fonts.googleapis.com/css?family=Karla:300,400,500,700' type='text/css' media='all' />
    <link rel="stylesheet" href="http://blackrockdigital.github.io/startbootstrap-sb-admin/font-awesome/css/font-awesome.min.css">
    <link href="main.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav0">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="login.html" class="navbar-brand">Phone Reviews</a>
                </div>
                <div class="collapse navbar-collapse" id="nav0" ng-controller="NavCtrl">
                    <ul class="nav navbar-nav navbar-right">
                        <li ng-click="scroll()" ng-class="{ active: isActive('/posts')}"><a href="#/posts">Home</a></li>
                        <li ng-click="scroll()" ng-class="{ active: isActive('/contact')}"><a href="#/contact">Contact Us</a></li>
                        <li ng-click="scroll()" ng-class="{ active: isActive('/registration')}"><a href="#/registration">Register</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="">My Account <i class="fa fa-caret-down"></i></a>
                            <ul class="dropdown-menu" ng-init="userInit(<?php echo $_SESSION['name'] $_SESSION['role']; ?>)">
                                <li><a href="#">{{user}}</a></li>
                                <li><a href="#">Account</a></li>
                                <li><a href="#">Favourites</a></li> 
                                <li><a href="#">Settings</a></li> 
                                <li><a href="#">Logout</a></li> 
                            </ul>
                        </li>
                    </ul>
                </div> <!-- /.navbar-collapse -->
            </div> <!-- /.container -->
        </nav>

        <header class="header">
            <h1>Phone Reviews</h1>
        </header>

        <div class="alert alert-dismissible alert-success">
            <button type="button" class="close" data-dismiss="alert">&times;</button>
            <h4>Success!</h4>
            <p>You have successfully registered! Go to your email to confirm account.</p>
        </div>

        <div class="social-icons">
            <ul>
                <li><a href="#" class="icon facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" class="icon instagram"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#" class="icon youtube"><i class="fa fa-youtube"></i></a></li>
                <li><a href="#" class="icon twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" class="icon pinterest"><i class="fa fa-pinterest"></i></a></li>
            </ul>
        </div>

        <div class="container-fluid" id="wrapper">
            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 content"><div ng-view></div></div>
            <div ng-include="'includes/sidebar.html'"></div>
        </div>

        <div ng-include="'includes/footer.html'"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-sanitize.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script async defer data-pin-hover="true" data-pin-tall="true" data-pin-round="true" data-pin-save="false" src="//assets.pinterest.com/js/pinit.js"></script>
<script src="ui-bootstrap.js"></script>
<script src="page.js"></script>
<script src="app.js"></script>
</body>
</html>
这是我的.htaccess文件

RewriteEngine on

# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]