Angular JS 路由在 URL 中显示文件名（在本地主机中）

Question

我在 visual studio 2010 年有一个网站（不是项目只是网站）。只有 angular 和 HTML 代码。

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

路由是这样工作的，但我不想看到文件名 "index.html" 或“#”符号。我见过很多解决方案并尝试过很多东西。 None 其中工作正常（所以我不会 post 所有在这里没有工作的东西）。

我页面的链接是：

<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>

路由代码是：

[(函数(){ 'use strict';

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 included/embeded in Visual Studio 2010，不是独立的 IIS），我想将其部署到根域名下的 Web 主机服务器.所以它需要为两者工作（所以我不能硬编码完整 url paths/etc）。

Answer 1

它在 angular 中被称为漂亮 URL。你需要做三件事。

1) 在 app.js 中，您必须注入 $locationProvider 服务并启用 html5Mode 路由。 html5Mode 路由仅适用于支持 HTML5.

的浏览器

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

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

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

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

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

如果不想设置base 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>

Angular JS 路由在 URL 中显示文件名（在本地主机中）

Angular JS routing is showing the file name in the URL (in localhost)

routing

location-provider

angularjs