Question

我正在尝试将html5模式用于我的平均应用程序。我的角度脚本中的视图路由器代码如下。

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

问题是当我导航到像/ team或/ contact这样的页面然后刷新时，只有部分服务没有样式。我想提供索引页面，然后将部分呈现为ng-route元素。我知道这需要重写我的节点服务器代码并尝试了几次重写但没有成功。

我见过这个Reloading the page gives wrong GET request with AngularJS HTML5 mode。我看到有很多关于使用html5模式的问题，但我已经尝试了许多解决方案而没有获得所需的行为。任何帮助是极大的赞赏。谢谢

Answer 1

instead of providing express routing for serving html partials, add a folder to the public directory called partials and load them as static resources in the angular router:

    .when('/', {
        templateUrl: '/partials/home.html',
        controller: 'mainController'
    })

now remove all your app.get('\req', routes.route) statements and provide one catch-all route to index

app.use(routes.index);

Now the page will always serve the index, regardless of the requested url. Refreshing the page will still serve the index.

The base tag in index.html is necessary. 'Main Rule' in web.config is unnecessary.

The hrefs in the navbar should have a slash in front of them, such as '/home' rather than 'home'. Everything should work as expected after making these changes.

在html5模式下使用ng-route重新加载角度页面不会返回index.html

1 个答案: