Угловая JS-маршрутизация показывает имя файла в URL-адресе (на локальном хосте)

У меня есть веб-сайт (а не просто сайт) в visual studio 2010. Просто угловой и HTML-код.Угловая JS-маршрутизация показывает имя файла в URL-адресе (на локальном хосте)

Когда я отладки с помощью 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>

код маршрутизации:

[(функция() { 'использовать строгий';

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 (так что заголовок и нижний колонтитулы отображаются, и это код в index.html).

Что мне нужно сделать, чтобы заставить это работать, не показывая URL-адрес страницы?

ПРИМЕЧАНИЕ: Я разрабатываю локальный хост (IIS включен/включен в Visual Studio 2010, а не отдельный IIS), и я хочу развернуть его на веб-хост-сервер под корневым доменным именем. Таким образом, это нужно будет работать для обоих (поэтому я не могу использовать полный код URL/etc).

источник

2016-05-13 Brad

Это называется довольно URL-адресом в угловом формате. Вам нужно сделать три вещи.

1) в app.js вам нужно ввести $locationProvider сервис и включить html5Mode маршрутизации. Маршрутизация html5Mode работает только для браузеров, поддерживающих HTML5.

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

Если вам интересно, вы можете проверить браузер для API истории html5. Если он не поддерживается, он автоматически откажется от использования подхода хеш-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) Настройка параметров сервера

Apache:

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-13 16:39:55

Где/как установить эти параметры в IIS? Это в моем web.config или в самом ИИС? Becuse Я не использую автономный IIS, это тот, который внутри Visual Studio. – Brad

Я пробовал большинство/все это, я снова посмотрю, но если вы можете сообщить мне о разделе конфигурации IIS (это может быть моя проблема). – Brad

@Brad вам нужно сначала установить URL-адрес для перезаписи на IIS. http://www.iis.net/downloads/microsoft/url-rewrite. Также посмотрите этот пост http://stackoverflow.com/questions/28678950/angularjs-routing-not-working-after-site-hosted-into-iis –

Угловая JS-маршрутизация показывает имя файла в URL-адресе (на локальном хосте)

ответ

Смежные вопросы