AngularJS 站点托管到 IIS 后路由无法正常工作

Question

我们正在 ASP.NET MVC 框架中使用 AngularJS 创建 SPA 技术，AngularJS 页面之间的路由在运行来自 VS2013 时工作正常，但在托管IIS7.5 路由中的应用程序无法正常工作，

路由脚本：

   var appRoot = angular.module('main', ['ngRoute', 'ngGrid', 'ngResource']);     //Define the main module

    appRoot
        .config(['$routeProvider', function ($routeProvider) {
            //Setup routes to load partial templates from server. TemplateUrl is the location for the server view (Razor .cshtml view)
            $routeProvider
                .when('/home', { templateUrl: '/home/main', controller: 'HomeController' }) .otherwise({ redirectTo: '/home' });
        }])
        .controller('RootController', ['$scope', '$route', '$routeParams', '$location', function ($scope, $route, $routeParams, $location) {
            $scope.$on('$routeChangeSuccess', function (e, current, previous) {
                $scope.activeViewPath = $location.path();
            });
        }]);

Index.html:

 <li class="mt" data-ng-class="{active : activeViewPath==='/home'}">
                    <a href='#/home'>
                        <i class="fa fa-dashboard"></i>
                        <span>Dashboard Home</span>
                    </a>
                </li>


  <div class="col-lg-9 main-chart" ng-view="">
                </div>

项目结构：

Answer 1

你在 IIS 上运行时会遇到任何 JS 错误吗？

您在使用捆绑包吗？如果是这样，请检查问题是否因 minification/bundle 创建添加而发生 BundleTable.EnableOptimizations = true; 在 RegisterBundles 方法中并在 VS 中重试。

否则，我建议您在本地 IIS 上运行（右键单击项目，选项卡 "Web"，部分 "Servers"）并查看它是否正常工作。

根据您的路由，您应该在模板头部 <base href="@Url.Content("~/")" /> 并在路由配置中使用 $locationProvider.html5Mode(true); 摆脱 url 中的“#”。

如果以上 none 有用，请在您的请求中添加更多详细信息。

祝你有愉快的一天，

阿尔贝托

Answer 2

您是将解决方案部署为网站还是虚拟路径上的应用程序？换句话说，当您部署应用程序时，url 是什么？它是类似于“myapp.mydomain.com”还是“domain.com/myapp”？

如果是后者，那么问题是对模板 { templateUrl: '/home/main' } 的请求将转到 domain.com/home/main 而不是 domain.com/myapp/home/main 当你期望的时候。

根据：Stating directive templateUrl relative to root 只需删除模板中的“/”url，它应该可以工作：{ templateUrl: 'home/main' }

另一种选择是将您的网站部署到它自己的子域。

Answer 3

你必须编辑一个 web.config 文件来进行重写，并且像这样在索引上 <base href="/myAppNameOnIIS/"> 没有应用程序名称，刷新将使用 web.config 文件正常工作

<?xml version="1.0" encoding="UTF-8"?>
 <configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="Main Rule" 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" />
                    <add input="{REQUEST_URI}" matchType="Pattern" pattern="views/(.*)" negate="true" />
                </conditions>
                <action type="Rewrite" url="/bidocs/" />
            </rule>    
        </rules>
    </rewrite> 
    <staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <mimeMap fileExtension=".wof2" mimeType="application/font-woff" />          
    </staticContent>
    <handlers>
        <add name="fonts2" path="*.woff2" verb="*" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" preCondition="bitness64" />
        <add name="fonts" path="*.woff" verb="*" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" preCondition="bitness64" />          
        <add name="JSON" path="*.json" verb="*" modules="IsapiModule" scriptProcessor="C:\Windows\System32\inetsrv\asp.dll" resourceType="Unspecified" preCondition="bitness64" />
    </handlers>
</system.webServer>

我使用此 <action type="Rewrite" url="/myAppNameOnIIS/" /> 修复它，以便 HTML5 模式工作。请记住，如果您是运行根文件夹中的应用程序

，此设置可能不适用于您的本地主机服务器

Answer 4

我刚刚将 <base href="@Url.Content("~/")" /> 添加到我的布局页面，一切正常。我在重新加载（刷新或 F5）页面时遇到问题，该页面将整个 url 发送到状态提供者中带有 $locationprovider.html5Mode(true); 的服务器，但是当我将其从状态提供者中删除时刷新问题解决了。我将该网站作为网站中的应用程序。

AngularJS 站点托管到 IIS 后路由无法正常工作

AngularJS routing not working after site hosted into IIS

asp.net-mvc

angularjs

iis-7

single-page-application

angularjs-routing