Вы также можете использовать приведенный ниже код для перенаправления на главную страницу (домой):

{ path: '', redirectTo: 'home', pathMatch: 'full'}

После указания перенаправления, как указано выше, вы можете перенаправить другие страницы, например:

{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}

try

$locationProvider.html5Mode(true)

Дополнительная информация в $ locationProvider Использование $ location

[/g8]

Использование режима HTML5 требует перезаписи URL-адресов на стороне сервера, в основном вам нужно переписать все ваши ссылки на точку входа вашего приложения (например, index.html). Требование к тегу <base> также важно для этого случая, так как позволяет AngularJS различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатывать приложение. Для получения дополнительной информации см. Руководство разработчика AngularJS - Использование $ location Режим сервера HTML5 .

Обновить

Практическое руководство. Настройка сервера для работы с html5Mode 1

Когда вы включите html5Mode, символ # больше не будет использоваться в ваших URL-адресах. Символ # полезен, поскольку он не требует конфигурации на стороне сервера. Без # URL выглядит намного приятнее, но также требует перезаписывания на стороне сервера. Вот несколько примеров:

Apache Rewrites

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Nginx Rewrites

server {
    server_name my-app;

    index index.html;

    root /path/to/app;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

Azure IIS Rewrites

<system.webServer>
  <rewrite>
    <rules> 
      <rule name="Main Rule" 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>

Express Переписывает

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

**

Рекомендуется использовать стиль HTML 5 (PathLocationStrategy) в качестве стратегии размещения в Angular

** Поскольку

1. Он создает чистые и удобные для SEO URL-адреса, которые пользователям легче понять и запомнить.
2. Вы можете воспользоваться рендерингом на стороне сервера, что ускорит загрузку приложения, путем рендеринга страниц на сервере, прежде чем доставить его клиенту.

Использовать Hashlocationstrtegy только в том случае, если вам необходимо поддерживать старые браузеры.

Нажмите здесь, чтобы узнать больше

Если вы хотите настроить это локально на OS X 10.8, обслуживая Angular с Apache, то вы можете найти следующее в вашем файле .htaccess:

<IfModule mod_rewrite.c>
    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]
</IfModule>

Параметры + FollowSymlinks, если они не установлены, могут давать вы запретили ошибку в таких журналах:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

Требуется переопределить базу, иначе запросы будут разрешены для вашего корневого сервера, который по умолчанию не является вашим каталогом проектов, если вы специально не настроили своих vhosts, поэтому вам нужно установить путь, чтобы запрос нашел корневой каталог проекта. Например, на моей машине у меня есть каталог / Users / me / Sites, где я сохраняю все свои проекты. Как и в старой OS X.

Следующие две строки эффективно говорят, что путь не является каталогом или файлом, поэтому вам нужно убедиться, что у вас нет файлов или каталогов, таких как маршрут приложения paths.

Следующее условие говорит, что если запрос не заканчивается указанными расширениями файлов, добавьте то, что вам нужно там

И последний [L] говорит, что он служит для файла index.html - ваше приложение для всех других запросов.

Если у вас все еще есть проблемы, проверьте журнал apache, он, вероятно, даст вам полезные советы:

/private/var/log/apache2/error_log

Следующая информация взята из: https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

Это очень легко получить чистые URL-адреса и удалить хэштег из URL-адреса в Angular. По умолчанию, AngularJS будет маршрутизировать URL-адреса с хэштегом. Пример:

• http://www.example.com
• http : //www.example.com/#/about
• http://www.example.com/#/contact

Есть 2 вещи, которые необходимо выполнить.

• Настройка $ locationProvider
• Настройка нашей базы для относительных ссылок
• $ location Service

В режиме «Угловая» служба определения местоположения анализирует URL-адрес в адресной строке и вносит изменения в ваше приложение и наоборот.

Я бы настоятельно рекомендовал прочесть официальную Angular $ location docs, чтобы получить представление о службе определения местоположения и о том, что она предоставляет.

https://docs.angularjs.org/api/ng/service/$location

$ locationProvider и html5Mode

• Мы будем использовать модуль $ locationProvider и установить html5Mode в true.
• Мы сделаем это при определении вашего углового приложения и настройка маршрутов.

  angular.module('noHash', [])
  
  .config(function($routeProvider, $locationProvider) {
  
     $routeProvider
         .when('/', {
             templateUrl : 'partials/home.html',
             controller : mainController
         })
         .when('/about', {
             templateUrl : 'partials/about.html',
             controller : mainController
         })
         .when('/contact', {
             templateUrl : 'partials/contact.html',
             controller : mainController
         });
  
     // use the HTML5 History API
     $locationProvider.html5Mode(true); });
  

Что такое API истории HTML5? Это стандартизованный способ управления историей браузера с помощью скрипта. Это позволяет Angular изменять маршрутизацию и URL-адреса наших страниц без обновления страницы. Для получения дополнительной информации об этом, вот хороший API-интерфейс истории HTML5:

http://diveintohtml5.info/history.html

Настройка для относительного Ссылки

• Чтобы связать ваше приложение с помощью относительных ссылок, вам необходимо установить <base> в <head> вашего документа. Это может быть в корневом файле index.html вашего приложения «Угловое». Найдите тег <base> и установите его в URL-адрес корня, который вы хотите использовать для своего приложения.

Например: <base href="/">

• Там есть много других способов настроить это, и режим HTML5, установленный в true, должен автоматически разрешать относительные ссылки. Если ваш корень вашего приложения отличается от вашего url (например, / my-base, а затем используйте его в качестве базы.

Откат для старых браузеров

• Служба $ location автоматически отменит метод hashbang для браузеров, которые не поддерживают API истории HTML5.
• Это происходит прозрачно для вас, и вам не придется настраивать что-либо для его работы. Угловые $ location docs вы можете увидеть метод резервного копирования и то, как он работает.

In Conclusion

• Это простой способ получить красивые URL-адреса и удалите хэштег в своем угловом приложении. Получайте удовольствие, делая эти суперчистые и супер быстрые угловые приложения!

Как уже упоминалось выше, этапы -

Добавить <base href="/"> в index.html Включить html5mode $ location.html5Mode (true) в app.js.

При этом приложение будет работать хорошо. Но только в сценариях, когда вы перемещаетесь с index.html на другие страницы. Например, моя базовая страница - www.javainuse.com. Если я нажму на ссылку java, она будет правильно перемещаться по адресу www.javainuse.com/java.

Однако, если я прямо перейду на сайт www.javainuse.com/java, страница не будет найдена.

Чтобы решить эту проблему, мы должны использовать переписывание URL. Для сети Dot требуется переписывание URL-адресов для IIS.

Если вы используете tomcat, тогда переписывание URL-адресов нужно будет сделать с помощью Tuckey. Вы можете получить дополнительную информацию о перезаписи URL здесь

Если вы включили html5mode, как говорили другие, и создайте файл .htaccess со следующим содержимым (скорректируйте свои потребности):

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]

Пользователи будут перенаправлены в ваше приложение, когда они введите правильный маршрут, и ваше приложение прочитает маршрут и вернет их на правильную «страницу» внутри него.

РЕДАКТИРОВАТЬ: просто убедитесь, что у вас нет конфликтов имен файлов или каталогов.

Давайте напишем ответ, который выглядит простым и коротким

В Router at end добавьте html5Mode (true);

app.config(function($routeProvider,$locationProvider) {

    $routeProvider.when('/home', {
        templateUrl:'/html/home.html'
    });

    $locationProvider.html5Mode(true);
})

В html head добавить базовый тег

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

благодаря @ plus- для подробного описания вышеупомянутого ответа