Visual Studio 网站中的 Angular html5Mode [英] Angular html5Mode in Visual Studio website
问题描述
我想在 VS2015 上的网站项目中使用 html5Mode.默认页面工作正常，但是当我使用 angular 定义的路由时，它显示 404 错误.我在 web.config 上添加了以下代码，但它似乎无法正常工作
<modules runAllManagedModulesForAllRequests="true"/></system.webServer> 我的角度路线看起来像:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {$urlRouterProvider.otherwise("/countries")$stateProvider.state('主页', {网址:'/国家'，templateUrl: 'assets/app/templates/countries.html',//控制器:'国家控制器'，控制器: 'countriesController as cCtrl',解决: {办公室资源:功能(apiCommunicationFactory){返回 apiCommunicationFactory.Office.get();}}}).state('国家详情', {url: '/countries/:office',控制器: 'countryDetailController as countryDetailCtrl',templateUrl: 'assets/app/templates/country.html',})$locationProvider.html5Mode(true);});我错过了什么吗?我怎样才能让它工作?
原因
您会收到 404，因为该请求绕过了应用程序的入口点(因此是有角度的！)，这意味着 Web 服务器将在不存在的文件夹中寻找服务器指定的默认文档之一.
修复
1) 通过将 部分来指定应用程序的入口点.index.html 文件.这告诉 angular 应该将相对 URL 解析到何处.
2) 在 web.Config 文件的
<规则><规则名称="AngularJS 路由" 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"/></条件><action type="重写" url="/"/></规则></规则></rewrite> 更新 - 回复:重写规则和条件
一定要查看官方文档:URL 重写模块配置参考
这是您指定规则何时生效的地方.使用 * 或 .* 它将匹配每个传入的请求，如果条件(如果有)通过...
这是您指定和分组条件的地方.设置 logicalGrouping="MatchAll" 意味着所有条件的计算结果都必须为真，以便重写 URL.
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
上面的意思是:确保请求的 url 没有指向文件.如果您要链接到 Web 服务器上的文件，则需要它.例如，我经常创建指向 .ics 文件的链接来创建公共日历，而您不想重写(重定向)这些链接，而是希望它们点击文件.
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true"/>.
这意味着:确保请求的 url 没有指向目录.如果您想列出 Web 服务器上某个目录中的文件，您将需要它.我不这样做，所以实际上不需要它！
<add input="{REQUEST_URI}" pattern="api/(.*)" negate="true"/>
这意味着:确保请求的 url 不以 api/ 开头，即它不是对我的异步调用web api，因为我所有的 api 调用都以 api/ 开头，我不想将它们重写为 index.html，我希望它们完全按照要求继续并点击我的 api 操作方法.
如果上述任何一个条件评估为假(即它是一个文件或它是一个目录 或 它是一个 api 调用)，那么 URL 将不会被重写，因为 logicalGrouping="MatchAll" 已被指定.>
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?
The Cause
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.
The Fix
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) 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>
UPDATE - Re : The Rewrite Rules and Conditions
Definitely check out the official docs: URL Rewrite Module Configuration Reference
<match 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">
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" />
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" />.
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" />
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.
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屋！
