Як видалити знак "#" в URL-адресах angular-ui-router

Я використовую бібліотеку angular-ui-router, і у мене проблема з URL-адресами.

У мене є такий код:

app.js:

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('state', {
        url: '/state',
        templateUrl: 'templates/state.html',
        onEnter: function () {
            /*... code ...*/
        }
    })});

index.html:

<a href="#/state">STATE</a>

Це працює, але коли я видаляю "#" з <a>тегу, це не працює.

Як я можу видалити знак "#" з URL-адреси?

javascript angularjs angular-ui-router

— Незборала
джерело

Я думаю, вам доведеться використовувати режим HTML5, інакше потрібно використовувати хеш для маршрутів

— Ян

html5mode = true або html5mode = false

— Іван Бахер

Відповіді:

120

Вам потрібно ввімкнути HTML5Mode, якщо ви хочете навігацію без хеш-тегів:

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

Вам також потрібно буде повідомити кутову кореневу URL-адресу вашого додатка, додавши наступний код до <head> вашого HTML-файлу:

<base href="/">

Майте на увазі, що підтримка режиму HTML5 залежить від браузера. Для тих, хто не підтримує API історії, Angular повернеться до hashbang .

— Саймон Белангер
джерело

І в мене є ще одне запитання. Коли я вставляю URL-адресу www.example.com/state, у мене немає сторінки з очікуваним вмістом. Чи можу я з цим щось зробити?

— Незборала

Це залежить від вашого сервера. Вам потрібно показати такий самий вигляд, як і з кутового кореня програми. AngularJs досить розумний, щоб переглянути URL-адресу та показати відповідний View / Controller. Наприклад, якщо ви зазвичай переходите до свого додатка з / angular, вам потрібно вирішити випадок, коли перехід до / angular / state насправді не відображається до реальної URL-адреси, а насправді є маршрутом у / angular і показує те саме вид.

— Саймон Белангер

Також не забудьте помістити <base href="https://stackoverflow.com/">тег до <head>розділу index.html

— Saqueib

Або ви можете налаштувати $ locationProvider не вимагати базового тегу, передавши об'єкт визначення з requireBase: false до $ locationProvider.html5Mode (): $ locationProvider.html5Mode ({увімкнено: true, requireBase: false}); Див .: docs.angularjs.org/error/$location/nobase

— sigmapi13

@SimonBelanger я використовую mvc4 і тим, що я створив області для контролера моделей для конкретного користувача і переглядаю мою цільову сторінку в Areas / Admin / View / Home / Index, що використовує _Layout як головний шаблон, як мені писати url у базовому href?

— 3

Якщо ви використовуєте Angular 1.6+ , вам також потрібно буде видалити hashPrefixз URL-адреси:

appModule.config(['$locationProvider', function($locationProvider) {
  $locationProvider.hashPrefix(''); // by default '!'
  $locationProvider.html5Mode(true);
}]);

Не забудьте також змінити базу:

<head>
    ...
    <base href="/">
</head>

— Mistalis
джерело

    yourApp.config(function ($stateProvider, $urlRouterProvider,$locationProvider) {

    $urlRouterProvider.otherwise('/home');

    //add this line in your routing code   
    $locationProvider.html5Mode(true);

    $stateProvider.state('web.home', {
                url: '/home',
                templateUrl: 'pages/home.html',
                controller: 'mainController'         
            })
    }

у вашому index.php або index.html у вставці тегу <head>

< base href="/" >

для CodeIgniter :

<base href=" < ?php echo base_url() ?  >" >

— Вішал Натбоун
джерело