Angularjs ui-router- 404在刷新頁面找不到

我有3頁：索引（父頁），home和註冊。我讓一個控制器註冊控制器擁有一個功能註冊，以便在控制檯中打印用戶來自表單輸入。當我從URL中刪除路由爲「localhost/angular-project /」時，這些鏈接將一直運行，直到我刷新爲止，這使我找不到狀態碼404。我不知道爲什麼？這裏是我的代碼Angularjs ui-router- 404在刷新頁面找不到

的index.html

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <base href="/angular-project/"> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Project</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
</head> 
<body> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Vogator</a> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a ui-sref="home">Home <span class="sr-only">(current)</span></a></li> 
        <li><a ui-sref="signup">Signup</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <div ui-view></div> 

    <script src="lib/jquery.js"></script> 
    <script src="lib/bootstrap.js"></script> 
    <script src="lib/angular.js"></script> 
    <script src="lib/angular-ui-router.js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/routes.js"></script> 
    <script src="js/controllers.js"></script> 
</body> 
</html>

home.html的

<h1>Welcome</h1>

signup.html

<h1>Signup</h1> 

<form class="form-horizontal" novalidate name="signupForm" ng-submit="submitted=true;signup()"> 

    <input type="text" name="name" ng-model="user.name" required class="form-control" placeholder="Enter your name"> 
    <p ng-if="signupForm.name.$error.required && submitted">Please enter your name</p> 

    <input type="text" name="email" ng-model="user.email" required class="form-control" placeholder=" Enter your email"> 
    <p ng-if="signupForm.email.$error.required && submitted">Please enter your email</p> 
    <p ng-if="signupForm.email.$error.email && submitted">Please enter valid email</p> 

    <input type="text" name="mobile" ng-model="user.mobile" required class="form-control" placeholder="Enter your mobile"> 
    <p ng-if="signupForm.mobile.$error.required && submitted">Please enter your mobile</p> 

    <input type="password" name="password" ng-model="user.password" required class="form-control" placeholder="Enter your password"> 
    <p ng-if="signupForm.password.$error.required && submitted">Please enter your password</p> 

    <button name="button">Signup</button> 
</form>

app.js

'use strict'; 
angular.module('myApp', ['ui.router'])

controller.js

angular.module("myApp").controller("signupController", function($scope){ 
    $scope.signup = function(){ 
     console.log($scope.user); 
    } 
})

routes.js

angular.module("myApp") 
.config(function($stateProvider, $urlRouterProvider, $locationProvider){ 
    $urlRouterProvider.otherwise('/home'); 
    $stateProvider 
    .state('home',{ 
     url: '/home', 
     templateUrl: 'templates/home.html' 
    }) 
    .state('signup',{ 
     url:'/signup', 
     templateUrl: 'templates/signup.html', 
     controller: 'signupController' 
    }); 

    $locationProvider.html5Mode(true); 
})

來源

2017-05-10 Amr Ashraf

的可能的複製[重新加載頁面給出了AngularJS HTML5模式錯誤的GET請求（http://stackoverflow.com/問題/ 16569841/reloading-the-page-given-wrong-get-request-with-angularjs-html5-mode） – Phil

@Phil你引用它的鏈接並不能解決我的問題 –

我得到了我在這裏失蹤的內容，我在位於「wamp/bin/apache/apache2.4.23/conf」中的httpd.conf文件中將AllowOverride從none更改爲all，並且在項目中創建了.htaccess根文件夾，我把這段代碼裏面瞧

<IfModule mod_rewrite.c> 
    Options +FollowSymlinks 
    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] 
</IfModule>

代碼refrence：.htaccess, #AngularJS, UI-Router: Configure Apache server to work with html5Mode

來源

2017-05-12 00:24:51