在刷新页面上未找到Angularjs ui路由器-404
我有3个页面:索引(父页面)、主页和注册。我让一个控制器注册控制器有一个功能注册,以便在控制台中打印来自表单输入的用户。当我从URL中删除类似“localhost/angular project/”的路由时,链接会一直工作,直到我刷新为止,它会给我状态代码404 not found。我不知道为什么?这是我的密码 index.html在刷新页面上未找到Angularjs ui路由器-404,angularjs,.htaccess,angular-ui-router,Angularjs,.htaccess,Angular Ui Router,我有3个页面:索引(父页面)、主页和注册。我让一个控制器注册控制器有一个功能注册,以便在控制台中打印来自表单输入的用户。当我从URL中删除类似“localhost/angular project/”的路由时,链接会一直工作,直到我刷新为止,它会给我状态代码404 not found。我不知道为什么?这是我的密码 index.html <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> &
<!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>
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);
})
这是因为
$locationProvider.html5Mode(true)代码>
设置为false
你就可以开始了。我得到了我这里缺少的东西,我将位于“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>
选项+FollowSymlinks
重新启动发动机
#不要重写文件或目录
RewriteCond%{REQUEST_FILENAME}-f[或]
RewriteCond%{REQUEST_FILENAME}-d
重写规则^-[L]
#将所有其他内容重写为index.html,以允许html5状态链接
重写规则^index.html[L]
代码参考:您引用的@Phil链接可能重复,但这并不能解决我的问题
angular.module("myApp").controller("signupController", function($scope){
$scope.signup = function(){
console.log($scope.user);
}
})
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);
})
<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>