Visual Studio网站中的Angular html5Mode [英] Angular html5Mode in Visual Studio website
问题描述
我想在VS2015上的网站项目中使用html5Mode.默认页面正常工作，但是当我使用在angular上定义的溃败时，它显示404错误.我在web.config上添加了以下代码，但似乎无法正常工作
I want to use the html5Mode in a website project on VS2015. The default page is working correctly, but when I use a rout defined on angular, it shows a 404 error. I added the following code on web.config, but it does not seem to work properly
<system.webServer>
<modules runAllManagedModulesForAllRequests="true"/>
</system.webServer>
我在棱角上的路线如下:
My routes on angular look like :
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/countries")
$stateProvider
.state('mainpage', {
url: '/countries',
templateUrl: 'assets/app/templates/countries.html',
//controller: 'countriesController',
controller: 'countriesController as cCtrl',
resolve: {
officesReso: function (apiCommunicationFactory) {
return apiCommunicationFactory.Office.get();
}
}
})
.state('countryDetail', {
url: '/countries/:office',
controller: 'countryDetailController as countryDetailCtrl',
templateUrl: 'assets/app/templates/country.html',
})
$locationProvider.html5Mode(true);
});
我错过了什么吗?我该如何运作?
Am I missing something? How can I make it work?
推荐答案
原因
您收到404，因为该请求绕过了应用程序的入口点(因此是角度的！)，这意味着Web服务器将在不存在的文件夹中查找服务器的指定默认文档之一.
You get a 404 because the request bypasses the entry point to your application (and thus angular!) meaning that the web server is left looking for one of the server's specified default docs in a folder that doesn't exist.
修复
1)通过将<base href="/index.html">放在 index.html 文件的<head>部分中，指定应用程序的入口点.这告诉角度应将相对URL解析到何处.
1) Specify the entry point of your application by placing <base href="/index.html"> in the <head> section of your index.html file. This tells angular where relative URLs should be resolved to.
2)在 web.Config 文件的<system.webServer>部分中创建重写规则.这将迫使Web服务器始终点击您的index.html文件，并允许角度路由引擎启动.当然，我们并不总是希望每个http请求都点击index.html，因此添加了一些条件来忽略该规则.
2) Create a rewrite rule in the <system.webServer> section of the web.Config file. This forces the web server to always hit your index.html file and allow the angular routing engine to kick in. Of course, we don't always want to hit index.html with every http request and so several conditions have been added to ignore the rule.
<rewrite>
<rules>
<rule name="AngularJS Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="api/(.*)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
更新-Re:重写规则和条件
绝对可以查看官方文档: URL重写模块配置参考
Definitely check out the official docs: URL Rewrite Module Configuration Reference
<match url=".*" />
<match url=".*" />
这是您指定规则何时生效的位置.对于*或.*，它将在每个传入请求上匹配，如果条件(如果有)通过，它将重写URL.
This is where you specify when the rule will kick in. With * or .* it's going to match on every incoming request, and it will rewrite the URL if the conditions (if any) are passed...
<conditions logicalGrouping="MatchAll">
<conditions logicalGrouping="MatchAll">
在此处指定条件并进行分组.设置logicalGrouping="MatchAll"意味着所有条件都必须评估为true才能重写URL.
This is where you specify and group the conditions. Setting logicalGrouping="MatchAll" means that all of the conditions must evaluate to true in order for the URL to be rewritten.
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
上面的意思是: 确保所请求的网址未指向文件 .如果要链接到Web服务器上的文件，则需要此文件.例如，我经常创建指向.ics文件的链接以创建公共日历，并且您不想重写(重定向)这些链接，而是希望它们命中文件.
The above means: Make sure the requested url doesn't point to a file. You would need this if you were going to link to a file on your web server. I often create link to .ics files to create public calendars for example, and you don't want to rewrite (redirect) these links, you want them to hit the file.
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />.
这意味着: 确保所请求的网址未指向目录 .如果要在Web服务器上的目录中列出文件，则需要此文件.我没有这样做，所以实际上并不需要它！
This means: Make sure the requested url doesn't point to a directory. You would need this if you wanted to list the files in a directory on the web server. I'm not doing this, so don't actually need it!
<add input="{REQUEST_URI}" pattern="api/(.*)" negate="true" />
这意味着: 确保所请求的URL并非以api/ 开头，即，它不是对我的Web api的异步调用，因为所有我的api调用以api/开头，并且我不想将它们重写为index.html，我希望它们完全按照要求继续运行，并按我的api操作方法进行操作.
This means: Make sure the requested url doesn't start with api/ i.e. that it isn't an async call to my web api, because all of my api calls start with api/ and I don't want to rewrite them to index.html, I want them to continue exactly as requested and hit my api action methods.
如果以上条件之一为假(即 它是文件 或 它是目录 或 这是一个api调用 )，则由于指定了logicalGrouping="MatchAll"，因此不会重写该网址.
If any one of the above conditions evaluates to false (i.e. it is a file or it is a directory or it is an api call), then the URL won't be rewritten because logicalGrouping="MatchAll" was specified.
这篇关于Visual Studio网站中的Angular html5Mode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
