Angularjs UI-Router- 404 nicht gefunden auf der Seite aktualisieren

Ich habe 3 Seiten: Index (übergeordnete Seite), nach Hause und Anmeldung. Ich machte eine Controller-Anmeldung Controller haben eine Funktion Anmeldung in der Konsole der Benutzer von der Formulareingabe zu drucken. Wenn ich die Route von der URL entferne, um so "localhost/angular-project /" zu sein, funktionieren die Links, bis ich sie aktualisiere, gibt mir den Statuscode 404 nicht gefunden. Ich weiß nicht warum? Hier ist mein CodeAngularjs UI-Router- 404 nicht gefunden auf der Seite aktualisieren

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); 
})

Quelle

2017-05-10 Amr Ashraf

Mögliche Duplikat [Neuladen der Seite gibt falsch GET-Request mit AngularJS HTML5-Modus] (http://stackoverflow.com/ Fragen/16569841/Neuladen-der-Seite-gibt-falsch-erhalten-Anfrage-mit-angularjs-html5-Modus) – Phil

@Phil der Link, auf den Sie verweisen, löst nicht mein Problem –

Ich habe, was ich hier fehlt, ich änderte AllowOverride von keiner zu allen in der Datei httpd.conf in "wamp/bin/apache/apache2.4.23/conf", und ich erstellte .htaccess im Projekt Stammordner und ich habe diesen Code hinein und voila

<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>

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

Quelle

2017-05-12 00:24:51