我正在尝试为我的平均应用程序使用 html5 模式。我的 Angular 脚本中的 View 路由器代码如下。
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
// enumerate routes
// {tempUrl: req to send to express,
// cntrl: ng-cntrl to be used}
.when('/', {
templateUrl: '/home',
controller: 'mainController'
})
.when('/contact', {
templateUrl: '/contact',
controller: 'mainController'
})
.when('/team', {
templateUrl: '/team',
controller: 'mainController'
});
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);
我在我的index.html文件的头部放置了一个基本标签，如下所示:
...
<base href="/" />
</head>
<body ng-app="mainPage">
<header>
<nav class="navbar navbar-static-top" role="navigation">
<div>
<div class="navbar navbar-top">
<ul class="nav navbar-nav float-right">
<li ng-class="{ active: isActive('/')}"><a class="link-btn" href="">Home</a></li>
<li ng-class="{ active: isActive('/team')}"><a class="link-btn" href="team">Team</a></li>
<li ng-class="{ active: isActive('/lessons')}"><a class="link-btn" href="lessons">Lessons</a></li>
<li ng-class="{ active: isActive('/media')}"><a
</ul>
</div>
</div>
</nav>
<div ng-controller="mainController">
<div id="main">
<div class="container-fluid">
<div ng-view></div>
</div>
</div>
</div>
...
我还将此规则添加到我的 web.config 文件中:
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<!-- indicates that the server.js file is a Node.js application
to be handled by the iisnode module -->
<handlers>
<add name="iisnode" path="app.js" verb="*" modules="iisnode" />
</handlers>
<rewrite>
<rules>
<clear />
<rule name="app" enabled="true" patternSyntax="ECMAScript" stopProcessing="true">
<match url="iisnode.+" negate="true" />
<conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
<action type="Rewrite" url="app.js" />
</rule>
<rule name="Main Rule" enabled="true" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
在我的 app.js 文件中:
app.get('/', routes.index);
app.get('/home', routes.home);
app.get('/contact', routes.contact);
app.get('/team', routes.team);
app.get('/lessons', routes.lessons);
app.get('/media', routes.media);
app.get('/signup', routes.signUp);
app.post('/new', users.new);
//app.get('*', routes.index); uncommenting the last line causes
//index.html to render without css, even though my stylseete is being served.
//this is confusing to me because I do want to always serve the index page
问题是当我导航到/team 或/contact 等页面然后刷新时，仅提供部分内容而没有样式。我想提供索引页面，然后将部分渲染到 ng-route 元素中。我知道这需要重写我的 Node 服务器代码，并尝试了几次重写但没有成功。
我看过这个Reloading the page gives wrong GET request with AngularJS HTML5 mode 。我看到有很多关于使用 html5 模式的问题，但我尝试了很多解决方案，但没有得到所需的行为。任何帮助是极大的赞赏。 谢谢
最佳答案
不要提供用于服务 html 部分的快速路由，而是将一个文件夹添加到名为“部分”的公共(public)目录，并将它们作为静态资源加载到 Angular 路由器中:
.when('/', {
templateUrl: '/partials/home.html',
controller: 'mainController'
})
现在删除所有 app.get('\req', paths.route) 语句并提供一个到索引的包罗万象的路由
app.use(routes.index);
现在，无论请求的 URL 是什么，该页面将始终提供索引。刷新页面仍然会提供索引。
index.html 中的基本标签是必需的。 web.config 中的“主要规则”是不必要的。
导航栏中的 href 前面应有斜杠，例如“/home”而不是“home”。进行这些更改后，一切都应该按预期工作。
关于angularjs - 在html5模式下使用ng-route重新加载 Angular 页面不会返回index.html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35735667/