0

我在 Visual Studio 2010 中有一个网站（不是一个项目，只是网站）。只有角度和 HTML 代码。

当我使用 IE 进行调试时，我目前有路由工作，但它在 URL 中显示我的第一页（我的单页应用程序）的文件名，如下所示： http://localhost:1349/DP/index.html#/home

路由是这样工作的，但我不想看到文件名“index.html”或“#”符号。我已经看到了很多解决方案并尝试了很多事情。它们都不能正常工作（所以我不会在这里发布所有不起作用的东西）。

我的页面的链接是：

<li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#history">History</a></li> <li><a href="#coachs">Coachs</a></li> <li><a href="#activities">Activities</a></li> <li><a href="#calender">Calender</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#fundraisers">Fundraisers</a></li> <li><a href="#links">Links</a></li> <li><a href="#styletesting">Test Styles</a></li>

路由代码是：

[(function () { '使用严格';

var app = angular.module('app', ['ngRoute']);


// configure our routes
app.config(['$routeProvider','$locationProvider',
  function ($routeProvider, $locationProvider) {

    $routeProvider


        // catch all go home
        .when('/', {
            templateUrl: 'home.html',
            controller: 'homeController'
        })

        // route for the home page
        .when('/home', {
            templateUrl: 'home.html',
            controller: 'homeController'
        })

        // route for the about page
        .when('/about', {
            templateUrl: 'about.html',
            controller: 'aboutController'
        })

        // route for the contact page
        .when('/contact', {
            templateUrl: 'navbar.html',
            controller: 'contactController'
        })


        // catch all go home
        .when('/styletesting', {
            templateUrl: 'styleTesting.html',
            controller: 'styletestController'
        })


        /*
        // happens when nothing specificed
        .otherwise({
            redirectTo: '/'
        })
        */

        /*
        // not working/finding sites
        // if you don't wish to set base URL then use this
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });        
        */
    }]);]

如您所见，我已将 locationprovider 注释掉，因为它不起作用。我试过了，但也没有用。

在我尝试各种解决方案的过程中，我要么得到 404，要么加载我的页面，但没有加载 ng-view 页面中的部分（因此显示页眉和页脚，这就是 index.html 中的代码）。

在不显示页面 URL 的情况下，我需要做什么才能使其正常工作？

注意：我正在本地主机上开发（IIS 包含/嵌入在 Visual Studio 2010 中，而不是独立的 IIS），我希望将其部署到根域名下的 Web 主机服务器。所以它需要对两者都有效（所以我不能硬编码完整的 url 路径/等）。

4

1 回答 1

1

它在角度被称为漂亮的 URL。你需要做三件事。

1）app.js你必须注入$locationProvider服务并启用html5Mode路由。html5Mode路由仅适用于支持 HTML5 的浏览器。

app.config(["$locationProvider",
    function($locationProvider) {
        $locationProvider.html5Mode(true);
    }
]);

如果你好奇，你可以在浏览器中查看 html5 历史 API。如果不支持，它将自动回退到使用哈希 URL 方法。 https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
  }

2）您需要在索引文件的base标签中设置标签。head

<head>
    <meta charset="utf-8">
    <base href="/">
</head>

如果您不想设置基本 href 标签，您也可以这样做

$locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

3) 配置服务器设置

阿帕奇： 

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

IIS：

<system.webServer>
    <rewrite>
      <rules>
        <rule name="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" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
于 2016-05-13T16:39:55.910 回答