在html5模式下使用ng-route重新加载angular度页面不会返回index.html
我正在尝试为我的意思应用程序使用html5模式。 我的angular色脚本中的视图路由器代码如下。
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
问题是当我导航到像/团队或/联系然后刷新页面，只有部分服务没有造型。 我想提供索引页面，然后将部分渲染成ng-route元素。 我知道这需要重写我的节点服务器代码，并尝试了几次重写没有成功。
我已经看到这个Reloading页面给AngularJS HTML5模式提供了错误的GET请求 。 我看到有很多关于使用html5模式的问题，但是我已经尝试了许多解决scheme而没有获得所需的行为。 任何帮助是极大的赞赏。 谢谢
而不是提供服务的html partials express路由，添加一个文件夹到公用目录称为partials并加载它们作为静态资源在angular度路由器：
.when('/', { templateUrl: '/partials/home.html', controller: 'mainController' })
现在删除所有的app.get（'\ req'，routes.route）语句，并提供一个catch-allpath来索引
app.use(routes.index);
现在，该页面将始终提供索引，而不pipe请求的URL如何。 刷新页面仍然会提供索引。
index.html中的基本标记是必需的。 web.config中的“主规则”是不必要的。
导航栏中的hrefs应该在它们前面有一个斜线，比如“/ home”而不是“home”。 在做出这些改变之后，一切都应该按预期工作