在wordpress - ngRoute内部的Angular SPA中使用html5Mode会返回404
在WordPress中使用ngRoute构建的Angular SPA时，如果想要启用html5Mode，可能会遇到返回404错误的问题。这是因为html5Mode需要服务器端的配置来支持URL的重写。
要解决这个问题，可以按照以下步骤进行操作：
- 在WordPress的根目录下创建一个名为
.htaccess的文件（如果已存在，请备份原文件）。 - 打开
.htaccess文件，并添加以下代码：
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>这段代码会将所有的URL请求重写到index.php文件，以便Angular SPA能够正确处理路由。
- 保存并上传
.htaccess文件到WordPress的根目录。
完成以上步骤后，应该能够在WordPress - ngRoute内部的Angular SPA中成功使用html5Mode，而不再返回404错误。
关于html5Mode的概念，它是AngularJS中的一个功能，允许使用更加友好的URL格式，去掉URL中的#符号。它的优势在于可以提升用户体验，使URL更加简洁易读。
html5Mode的应用场景包括需要在Angular SPA中使用自定义URL结构的情况，例如希望URL中不包含#符号，或者希望URL更加语义化。
腾讯云提供了一系列与云计算相关的产品，其中与WordPress部署相关的产品包括云服务器（CVM）、云数据库MySQL版（CDB）、对象存储（COS）等。您可以根据具体需求选择适合的产品。
- 云服务器（CVM）：提供可扩展的云服务器实例，适用于搭建WordPress网站。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务，适用于存储WordPress的数据。
- 对象存储（COS）：提供安全可靠的对象存储服务，适用于存储WordPress的静态文件、图片等。
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和预算进行决策。
相关·内容
1回答
我无法让我的$routeProvider正常工作。
我有以下代码：
"use strict";
(function() {
angular.module("websiteApp", ["ngRoute"])
.config(["$routeProvider", function($routeProvider){
$routeProvider
.when("/example", {
templa
浏览 0提问于2015-10-25得票数 0
我当时在读。并尝试在我的IIS上获得示例工作。当我单击页面中的链接时。铬的地址将改为如下所示。
当我试图通过点击地址栏中的enter键来重新加载页面时。我认为它会为Moby重新加载页面内容。但是我发现了一个错误404。我不知道这是否是ngRoute的最佳实践。为什么我有404错误。
我不想在弹琴或活塞上演示它。因为我认为这与在IIS中部署它是不同的。所以我把代码发到下面。谢谢。
TestRoute.html
<html ng-app="ngRouteExample">
<head>
<title>Angualar
浏览 5提问于2014-08-15得票数 3
2回答
我试着用角度和角度设定路线，但有麻烦了。
var app = angular.module('sampleApp', ['ngRoute', 'firebase', 'ui.bootstrap']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'SampleCtrl
浏览 4提问于2014-09-02得票数 1
回答已采纳
我有一个WordPress站点，其中一个WordPress提供的页面是基于AngularJS的SPA。Angular-app使用html5mode，所以我可以浏览到http://localhost/79133/71，但我仍然显示index.html。现在我想把它部署到我的WordPress站点上，这样WordPress (主页面)下的一个页面就是我的SPA。但是，如果我浏览到http://example.com/79133/71，WordPress将尝试查找具有固定链接79133/71的页面，并且不会理解应该提供主页。如何配置WordPress，使这些新的“路由”指向第一个页面？
浏览 2提问于2015-03-03得票数 1
我有ASP.NET网络应用程序接口和Angular SPA。
出于身份验证的目的(实际上，一旦完成)，我必须从后端重定向到某个前端uri。
当前后端路由配置为开启，即
http://localhost:6004/company/api
而SPA是
http://localhost:9000/company/#/
我如何克服这里的端口并从这里重定向，即
http://localhost:6004/company/api/MyController
至
http://localhost:9000/company/#/redirectinsidespa
当应用程序驻留在某个url上时，解决方案也应该起
浏览 1提问于2016-04-06得票数 0
我有一个带有目录结构的angular应用程序
app
..views
....partials
......main.jade
......foo.jade
....index.jade
和定义如下的路由：
‘使用严格的’；
angular.module('myApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'firebase',
'myApp.config'
])
.confi
浏览 1提问于2013-12-09得票数 17
因此，我读了几本关于angular 1的书，并介绍了它们创建SPA的示例。代码如下所示
var app = angular.module('app', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
浏览 0提问于2016-02-09得票数 0
1回答
当使用ngRoute中的参数并直接访问URL (而不是通过站点内的链接)时，CSS不会加载。除了/chef/:id之外，我所有的路线都运行得很好。我使用了yeoman的，而且我正在使用grunt serve运行一些东西。
这是我的路线代码：
angular
.module('agFrontApp', [
'configuration',
'LocalStorageModule',
'ngCookies',
'ngRoute',
浏览 3提问于2014-09-25得票数 0
回答已采纳
1回答
Am安装AngularJS Development Yeoman，Grunt和Bower成功安装完成，然后使用grunt服务器运行服务器--它也在成功运行，但我的url传递如下：
http://localhost:9010/#!/#%2F
http://localhost:9010/#!/#%2Fabout
http://localhost:9010/#!/#%2F
一旦点击有关，联系链接没有工作传递url像上面，它是不走，联系页在我的安装过程中有任何问题或任何更改文件请给我解决方案。
'use strict';
angular
.module('newangu
浏览 3提问于2016-12-28得票数 2
回答已采纳
1回答
我正在尝试使用$routeParams获取URL参数：
var myApp = angular.module('myApp', [
'ngRoute',
'appControllers',
'appFilters',
'appServices'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/admin/organisations/:organisation_id&
浏览 0提问于2016-03-01得票数 2
1回答
这个问题以前已经回答过了，但可能适用于早期版本的Angular。我在Angular 1.6.1中工作。HTML5没有添加#！链接到URL但我的部分不能加载。
HTML：
<head>
...
<base href="localhost/test/angular/Jan102017">
...
<head>
<body>
...
<ul class="nav navbar-nav navbar-right">
<li><a href="/"><i class=
浏览 18提问于2017-01-27得票数 0
2回答
我是angular的新手，所以如果这真的很明显，我很抱歉！我正在做一个超级基础的应用程序，现在我想要的是当用户直接转到一个页面时，它应该总是显示布局和内容。我使用的是angular的ng-route。
现在，如果我转到localhost:8080/，它会显示布局(index.html)和内容(view/home.html)。如果我点击“关于”链接，它会转到localhost:8080/about并显示布局(index.html)和正确的内容(view/about.html)。现在，如果我在地址栏中输入localhost:8080/about，按enter，我会从服务器的日志中得到一个404错误
浏览 0提问于2015-06-12得票数 3
我希望从"/“为我的AngularJS SPA提供服务，为此，我禁用了默认路由，并且正在使用
// this action does not 'fire' due to Angular's routing...
routes.MapRoute(
name: "Test",
url: "Test",
defaults: new { controller = "Home", action = "Test" },
namesp
浏览 2提问于2014-02-01得票数 2
如果在我的angular应用程序中找不到路由，我想发送http状态代码404。直接使用angular是不可能的，因为它是一个SPA。我如何告诉一个搜索引擎优化爬虫，一个没有找到的路线是404？
浏览 0提问于2021-03-05得票数 1
我有一个角应用程序，我想改变每一页的网址。urls显示为“..com/#/home”而不是“..com/home”。有什么想法吗？
'use strict';
angular.module('myApp.home', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home', {
templateUrl: 'home/home.html',
co
浏览 2提问于2016-07-22得票数 2
回答已采纳
1回答
我有一个SPA，我正在尝试使用angular $http.jsonp从远程.NET WebAPI获取JSON数据。
var widgetApp = angular.module('widgetApp', ['ngRoute']).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
});
widgetApp.controller('topStreaksCtrl',
浏览 1提问于2015-01-14得票数 0
我正尝试在salesforce本地的混合安卓应用程序中使用AngularJS，虽然在火狐中对angular代码进行了简单的测试，但当我在安卓模拟器中运行它时，它会加载几分之一秒，并被一个空白屏幕所取代。
我注意到，在路由之后刷新页面(在第一个页面加载后转到[URL]/index.html#/ )最终会有一个永恒的“ajax加载”旋转器。我怀疑这可能是我问题的根源。我的路由代码如下所示：
var contactlistModule = angular.module("AugmentedContactList", ['ngRoute']);
contactlist
浏览 2提问于2014-05-05得票数 1
我正在遵循，试图在我的MVC3应用程序中创建一个SPA，其中SPA由控制器DemoController.cs调用。
当应用程序试图通过导航栏加载不同的模板(about.html、contact.html和home.html)时，我得到了404错误。
这是我的目录结构(不包括MVC3应用程序的其余部分)：
Scripts
-script.js
Views
-Demo
--pages
---about.html
---contact.html
---home.html
--Index.cshtml
--_ViewStart.cshtml
这是我的script.js文件，我在其中定义路由。
//
浏览 0提问于2013-12-01得票数 12
回答已采纳
我应该使用什么url才能到达路由中的"/phone“部分？我正在尝试这个http://localhost:8888/workspace/AngA/phones，但是页面是空白的。或者也许url是正确的，并且我忘记了其他的东西。
下面是完整的代码(视图的两个html页面，两个js页面)：
//in home.html
<h1>home</h1>
<p>
<a href="/phones/1">Add a {{ test }}</a>
</p>
----
//in index.html
&
浏览 0提问于2016-04-13得票数 0
1回答
嗨，我正在使用一个带有angular UI的webapi SPA应用程序。我正在使用如下所示的templateurl加载html页面
$uibModal.open({
templateUrl: '/PURNATEST/App/Reports/ABC/ReportEditModel.html',
controller: 'ABCDController',
scope: $scope
}).result.then(function ($scope) {
clearSearch();
}
浏览 0提问于2016-11-24得票数 0
3回答
当我在本地运行它时，这段代码工作得很好，但是当我把它放在这个柱塞()中时，我会得到以下循环404错误：
Failed to load resource: the server responded with a status of 404 (Not Found) http://run.plnkr.co/main.html
GET http://run.plnkr.co/main.html 404 (Not Found) angular.js:8521
我遗漏了什么？
浏览 3提问于2014-08-13得票数 3
回答已采纳
1回答
我想做的是：
我试图在Google上构建一个RESTful应用程序，它以角度处理路由和查看逻辑，而Flask处理后端逻辑和资源。
问题：
当我启动GAE的开发服务器时，第一个页面将完美地加载。问题是，当我单击页面顶部的Referrals链接时，正在加载的模板不会改变。
我到目前为止做了什么，
虽然我似乎在下面粘贴了很多代码，但大部分代码都是标记，而且里面没有任何复杂的应用程序逻辑，所以浏览就足够了。
我计划先构建前端，然后构建后端(尽管我已经有了一些后端设置)。到目前为止，应用程序不依赖于烧瓶应用程序(它没有任何应用逻辑，也没有任何请求处理程序)。
这是我的app.js文件，到目前为止，我所做
浏览 1提问于2015-06-01得票数 10
回答已采纳
我的目标是有一个链接在我的网页重定向到我的网站上的另一个网页。
下面是我的index.html页面上的两个链接之一：
<html ng-app="myApp">
.
.
.
<body>
<h1>My Home Page</h1>
<div>
<a href="login/google" class="button">Sign in with Google</a>
浏览 1提问于2016-01-27得票数 0
当我在我的应用中实现angular UI路由器时，我的视图URL显示为：
www.example.com/serverpath#/UIRouterPath1
www.example.com/serverpath#/UIRouterPath2
现在我想改成像这样的
www.example.com/serverpath/SPA/UIRouterPath1
www.example.com/serverpath/SPA/UIRouterPath2
我该如何做到这一点？
浏览 5提问于2016-01-01得票数 0
我在我的ASP.Net MVC应用程序中使用了AngularJS路由，它工作得很好。然而，当我在angular routing中导航时，它会在地址栏中产生奇怪的URL。我使用的例程代码如下所示：
路由代码-
var app = angular.module("webApp",['ngRoute']);
app.config(function($routeProvider){
$routeProvider.when(
"/",{
templateUrl: "home/dashboard"
浏览 2提问于2017-01-08得票数 0
2回答
我正在尝试用Firebase应用程序建立基本的角度路由，而且遇到了困难
我的index.html是：
<html ng-app="SampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/an
浏览 3提问于2014-09-16得票数 1
回答已采纳
1回答
在我的角度应用程序中，我想使用$location.path(‘/’)进行重定向；但是我得到了这个错误--未定义错误：$injector:modulerr未能实例化模块myApp，原因是:错误：$injector:modulerr未能实例化模块myApp.login，原因是: TypeError:无法读取未定义的属性'html5Mode‘
angular.module('myApp.login', ['ngRoute', 'angular-md5'])
.config(['$routeProvider', function
浏览 0提问于2015-11-29得票数 2
我试图将我的Angular.js SPA推送到IIS7服务器上，但有问题。该应用程序似乎加载了一半(因为我的视图和模板加载得很好)，但随后停止了这样的工作：
正如您所看到的，console...and中没有错误，只是为了更好的度量，我检查了Fiddler，它也没有问题：
SPA在我的本地web服务器上完全正常工作，只有在被推到IIS时才会出现问题。任何想法都将不胜感激！
编辑：
看起来问题在于在运行grunt build时没有正确地包含角-csp.css --这是通过将以下内容添加到我的项目的bower.json文件中来解决的：
"overrides": {
浏览 2提问于2015-03-18得票数 0
回答已采纳
2回答
角的ngRoute拦截它没有匹配的路径。有办法把这个关掉吗？某种我错过的.otherwise('business as usual')？
我使用的是$locationProvider.html5Mode(true)，这是有意的。
默认情况下，ui-router不会这样做。有一个.else(...)选项，但是如果不调用它，ui-router允许浏览器像往常一样处理不匹配的urls。这就是我想要的行为；只是，对于ngRoute。
示例：
该页面上的前两个链接按预期工作。
第三个链接(“他处”)应该是404 (如果您单击它，然后在浏览器中提交url或手动刷新)。
在这
浏览 2提问于2014-05-07得票数 1
我试图在事件之后重定向到另一条路由，但它只显示url更改(更改为)。我想把它改成，但是我想不出怎么做。而我的这条路不管用。
app.js
var app = angular.module('laravel', ['ngRoute'])
.constant('API_URL', 'http://localhost:8000/')
.config(function ($routeProvider, $locationProvider) {
$routeProvider
浏览 0提问于2017-02-17得票数 0
回答已采纳
//您好，我正在学习Angular路由。我只是在尝试youtube上的一个简单示例。当我点击页面1和页面2链接时。我仍然站在同一立场上。请帮帮忙
//This is index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Practice</title>[enter image description here][1]
<script src = "app.js" type =
浏览 0提问于2017-04-05得票数 0
1回答
角路由不起作用
、、、
我对角度路由有问题。
index.html：
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angul
浏览 0提问于2014-06-05得票数 0
回答已采纳
1回答
我试图通过Visual创建一个类型记录SPA项目，并使用AngularJS来处理路由。这是我的配置。
var app = angular.module("myApp", ["ngRoute"]);
app.config(($routeProvider, $locationProvider) => {
$routeProvider
.when("/", {
templateUrl: "/pages/index/index.html"
})
.when("/about",
浏览 1提问于2016-10-18得票数 1
回答已采纳
1回答
我正在构建一个新的Rails API / Angular应用程序。我有两个基本页面，其中一个是Gulp默认生成的页面。我有点迷失在这些重定向上。
如果我键入以下内容：
浏览器将主页重定向到此地址(请注意散列)：
当我键入时：
然后浏览器也用浏览器中的这个地址重定向主页：
'use strict';
angular.module('myapp', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngRoute', &#
浏览 0提问于2015-04-07得票数 0
2回答
因此，我最近使用express node jade和angular研究了均值堆栈；实际上，我认为在jade中存在某种问题；我为复杂性道歉，但我真的不能弄明白它，希望从外部获得一些不同的观点；所以是这样的：
消息本身：
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot
浏览 2提问于2014-11-23得票数 2
回答已采纳
Y试图创建一个简单的web，使用asp.net项目mvc 5，我有这个js
var app = angular.module("app", ["ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/AngularJS/Templates/inicio.html',
controller: 'b
浏览 5提问于2015-08-19得票数 15
回答已采纳
我是angularJS的新手。
我正在尝试用ng-route和ng-view做一个小的angular应用。当用户单击登录按钮时，网址将从localhost:8000更改为localhost:8000/login。
现在，如果用户重新加载页面，/login视图将在页面加载时加载。
这是我在ng-app和ng-controller上的文件。
<html ng-app="loginSignUpApp">
<head>...</head>
<body ng-controller="mainController">
浏览 7提问于2015-07-02得票数 1
1回答
我正试着用ngMeta分享facebook上的帖子和他适当的meta属性。但是，我没有收到任何类型的信息。我在html中的ngMeta被忽略了。我不能“运行”这个区块。
下面是我的代码：
var vToken, myURL;
var site4R = angular.module('site4R', ['myServices', 'ngRoute', 'ui.bootstrap', '720kb.socialshare', 'ngRoute'])
.config(['$routeProv
浏览 4提问于2017-07-28得票数 0
回答已采纳
我正在开发一个需要使用HTML 5模式的应用程序。由于我正在迁移一个现有的站点来使用AngularJS 1.2，我不能在我的网址中有'#‘标签。目前，我有以下几点：
angular.module('myApp', ['ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routePr
浏览 4提问于2013-10-06得票数 14
回答已采纳
我是angularjs的新手，我尝试了一个路由的演示测试，下面是我的代码
app.js
var app=angular.module("tutorialApp",["ngRoute","tutorialCtrlModule"]);
app.config(function($routeProvider){
$routeProvider
.when("/",{
templateUrl:"views/tutorial.html",
controller:"T
浏览 30提问于2018-07-26得票数 0
回答已采纳
我正在使用AngularJS构建一个wordpress主题，并且已经切换到使用ui-router而不是ngRoute。通常情况下，除非我刷新页面或在浏览器中键入URL，否则一切正常。页面加载，但未加载任何状态。唯一的例外是/blog，这是一个与wordpress URL不匹配的页面。Wordpress抛出了一个404，但是Angular加载了正确的路径--我不明白wordpress的所作所为是如何影响Angular的，因为在所有情况下，加载的都是相同的文件(index.php)，并且Angular本身也会启动，正如console.log()所证明的那样。
我使用ngRoute进行了非常相似的配
浏览 1提问于2015-12-01得票数 0
1回答
我试图在angularjs中使用index.html删除url的html5Mode(true)，这是代码：
angular.module('myApp', [
'ngRoute',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]).
config(['$routeProvider', '$locationProvider', function(
浏览 2提问于2013-10-27得票数 5
回答已采纳
1回答
我一直在努力使用ng视图作为我的应用程序的子视图。我遵循了多个教程，甚至检查了routeProvider和locationProvider属性，以确保它们指向正确的路径。
index.html
<html ng-app="elephantApp">
...
<div id="view" ng-view>{{$scope.message}}</div>
...
</html>
application.js
/*
Main AngularJS for Elephant Blog App
*/
var elep
浏览 4提问于2014-11-13得票数 0
回答已采纳
我正在使用AngularJS ui-Router，而node js.Response将以JSON的形式出现。正常情况下，页面会正确呈现。如果我手动刷新同一页面，它会显示JSON数据而不是HTML。
请帮助我解决这个问题。
angular.module('app.routes',[])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',function($stateProvider, $urlRouterProvider, $locationPr
浏览 4提问于2016-10-05得票数 0
var app = angular.module("myApp", ["ngRoute","ui.router"]);
app.config(function($routeProvider,$urlRouterProvider,$locationProvider,$provide, $stateProvider) {
$routeProvider
.when("/", {
templateUrl : "templates/main.htm"
})
.when("/londo
浏览 0提问于2017-05-31得票数 1
1回答
在Angular.dart中使用RouteInitializerFn设置路由非常舒服。
但我还没能建立一条'404‘路线。也就是说，当用户访问一个无法匹配的路由时，应该将其重定向到一个404.html页面。
myRouter(Router router, ViewFactory view) {
view.configure({
'home' : ngRoute(
defaultRoute : true,
view : './home.html' // visiting www.mysit
浏览 2提问于2014-03-10得票数 2
回答已采纳
2回答
我正在尝试在IIS7上部署一次后，获得一个有角度的ui路由，但是即使在web.config中重写设置，它仍然不能像IIS7中那样完美地工作。
404状态总是被IIS截获并显示
404 -找不到文件或目录。您要查找的资源可能已被删除、已更改名称或暂时不可用。
但是我的路由器处理404重定向很好，并且在使用iis express时正确加载模板。
角配置
.config(["$stateProvider", "$locationProvider", "growlProvider", "$urlRouterProvider", f
浏览 6提问于2015-05-22得票数 2
回答已采纳
我一直在尝试使用angularJ将另一个模块(account.js)注入到SPA中的主模块(app.js)中，如下所示
var app = angular.module('UniversityApp', ['ngAnimate', 'ngRoute', 'ngResource', 'ui.bootstrap', 'landing','account']);
angular.bootstrap(document，'UniversityApp')；抛出错误“未捕获错误:无
浏览 0提问于2015-09-15得票数 1
ngRoute以前工作得很好，现在停止工作了，因为添加了很少的文件和控制器。在浏览器中，我得到的URL为，而不是
下面是我的代码，请帮忙。学习AngularJS并不断发现一些奇怪的问题。在JS控制台中没有看到错误。
app.js
var app = angular.module('DevStreamApp', ['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/', {templateUrl : 'views/main.html
浏览 1提问于2015-12-28得票数 2
1回答
你好，我正在尝试用AngularJS创建一个SPA，并且需要调用一个SOAP请求。但是一旦我在ngRoute之外添加了另一个依赖项，我的视图就不会再加载了。
Index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<script src="./angular/soapclient.js"></script>
<script src="./angular/an
浏览 2提问于2017-11-14得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
