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

У меня есть веб-сайт (не проект, а веб-сайт) в 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>

код маршрута:

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

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), и я хочу развернуть его на веб-сервере под корневым доменным именем. Так что это должно работать для обоих (поэтому я не могу жестко кодировать полные пути URL/и т. д.).


person Brad    schedule 13.05.2016    source источник


Ответы (1)


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

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) Настройка параметров сервера

Апач:

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

ИИС:

<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>
person Wild Widow    schedule 13.05.2016
comment
Где и как установить эти параметры в IIS? Это в моем web.config или в самом IIS? Поскольку я не использую автономный IIS, он работает внутри Visual Studio. - person Brad; 13.05.2016
comment
Я пробовал большую часть/все это, я посмотрю еще раз, но если вы можете сообщить мне о разделе конфигурации IIS (это может быть моя проблема). - person Brad; 13.05.2016
comment
@Brad, вам нужно сначала установить перезапись URL-адреса на IIS. iis.net/downloads/microsoft/url-rewrite. Также посмотрите этот пост stackoverflow.com/questions/28678950/ - person Wild Widow; 13.05.2016
comment
@Brad это в файле web.config - person Wild Widow; 13.05.2016
comment
Я уже установил это (хотя будет ли он установлен для IIS, который использует Visual Studio)? Я сделал все вышеперечисленные изменения (я уже пробовал все это таким образом), и когда я перехожу на страницы без index.html в URL-адресе, я получаю список каталогов. - person Brad; 13.05.2016
comment
Хорошо, я переключился на Visual Studio 2013 и внес изменения в веб-конфигурацию, и теперь все работает нормально! Должно быть, IIS плохо работает (или IIS внутри VS не обновляется) в Visual Studio 2010. - person Brad; 13.05.2016
comment
хотя мне пришлось закомментировать/удалить эти причины, потому что VS выдавал ошибку: - person Brad; 13.05.2016
comment
Да, я установил патч и сделал все так же, чтобы он работал. Единственное, чего мне не хватало, так это файла конфигурации, но я попробовал это, и это дало мне ошибки, когда в VS 2010 я перешел на VS 2013 и отлично работал. - person Brad; 13.05.2016