【问题标题】:AngularJS with HTML5mode(true) on IIS and <default document>在 IIS 和 <default document> 上带有 HTML5mode(true) 的 AngularJS
【发布时间】:2015-01-02 23:07:49
【问题描述】:

我有一个在 IIS 8.0(arvixe 托管)上运行的简单应用程序,它使用 AngularJS 作为 SPA 框架。我打开了 html5mode 并将标签链接到 index.html(根文件),我还在 web.config 中设置了这个文件。我知道你必须进行服务器端重写,我有。

我想要达到的目标如下:

用户输入“domain.com”,网站加载 domain.com/home。当然,在 URL 下实际上是 domain.com/index.html/home 但 html5mode 通过重写来处理它。

这是 app.config,这很好。

  .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider ) {
$routeProvider
    .when('/home', {
        templateUrl: 'templates/home.html',
        controller: 'HomeController'
    })
    .when('/login', {
        templateUrl: 'templates/login.html',
        controller: 'LoginController'
    })
    .when('/forum', {
        templateUrl: 'templates/forum.html',
        controller: 'ForumController'
    })
    .when('/rebellinks', {
        templateUrl: 'templates/rebellinks.html',
        controller: 'RebelLinksController'
    })
    .when('/events', {
        templateUrl: 'templates/events.html',
        controller: 'EventsController'
    })
    .when('/oldnews', {
        templateUrl: 'templates/oldnews.html',
        controller: 'OldNewsController'
    })
    .otherwise({
        redirectTo: '/home'
    });

//use HTML5 History API
$locationProvider.html5Mode(true);
   }]);

IIS 的 Web.Config 文件:

 <system.webServer>
    <rewrite>
      <rules>
        <clear />       
        <!--<rule name="jsRule" stopProcessing="true">
          <match url=".js" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
          </conditions>
          <action type="None" />
        </rule>-->

        <rule name="SRBShome" enabled="true" stopProcessing="true">
          <match url="^(.*)$" />
          <action type="Rewrite" url="/index.html" />
        </rule>
        <rule name="AngularJS" enabled="false" 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="/index.html" />
        </rule>        
      </rules>
    </rewrite>
    <defaultDocument enabled="true">
      <files>
        <clear />
        <add value="index.html" />
        <add value="home.html" />
      </files>
    </defaultDocument>

这样做是在用户访问站点时加载 domain.com/home 但 .js 文件被传输,因为我在重写中添加了一个特殊规则以防止它们重写,但我认为我的 SRBShome 规则模式需要进行调整以正常工作。

任何帮助表示赞赏。

【问题讨论】:

    标签: .net angularjs html iis web


    【解决方案1】:

    通过更改下面的重写规则来解决它。这允许在 IIS 上加载 index.html。出于某种原因,web.config 不适用于此设置。因此,现在当用户请求 domain.com 时,重写通过 '/index.html' 然后 AngularJS 的 html5Mode 启动并清理 URL 并删除 hashbang。

     <rewrite>
          <rules>
            <clear />        
            <rule name="SRBShome" enabled="true" stopProcessing="true">
              <match url="^(.+)$" negate="true" />
              <conditions>
                <add input="{REQUEST_URL}" pattern="^(.+)$" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" logRewrittenUrl="true"/>
              <!--<match url="^.com" />
              <action type="Rewrite" url="/index.html" />-->
            </rule>
            <rule name="AngularJS" 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" />
                <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
              </conditions>
              <action type="Rewrite" url="/index.html" />
            </rule>        
          </rules>
        </rewrite>
    

    【讨论】:

    • 当您的后端(例如 web api)部署在其他地方时,这非常有用。
    猜你喜欢
    • 2015-10-18
    • 2016-03-18
    • 1970-01-01
    • 2015-02-16
    • 2016-03-09
    • 1970-01-01
    • 2014-12-06
    • 2015-07-29
    相关资源
    最近更新 更多