Удаление идентификатора fragmentа из URL-адресов AngularJS (символ #)

Да, вы должны настроить $locationProvider и установить html5Mode в true :

 angular.module('phonecat', []). config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). otherwise({redirectTo: '/phones'}); $locationProvider.html5Mode(true); }]); 

Обязательно проверьте поддержку браузера для API истории html5:

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

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

 jobApp.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider) { $routeProvider. when('/', { templateUrl: 'views/job-list.html', controller: 'JobListController' }). when('/menus', { templateUrl: 'views/job-list.html', controller: 'JobListController' }). when('/menus/:id', { templateUrl: 'views/job-detail.html', controller: 'JobDetailController' }); //you can include a fallback by including .otherwise({ //redirectTo: '/jobs' //}); //check browser support if(window.history && window.history.pushState){ //$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so:   // to know more https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about setting base URL visit: https://docs.angularjs.org/error/$location/nobase // if you don't wish to set base URL then use this $locationProvider.html5Mode({ enabled: true, requireBase: false }); } }]); 

Я выписываю правило в web.config после $locationProvider.html5Mode(true) устанавливается в app.js

Надежда, помогает кому-то.

В моем index.html я добавил это в

Не забудьте установить URL-адрес перезаписывающего устройства для iis на сервере.

Также, если вы используете Web Api и IIS, этот URL-адрес совпадения не будет работать, поскольку он изменит ваши вызовы api. Поэтому добавьте третий вход (третья строка состояния) и выведите шаблон, который исключает вызовы с www.yourdomain.com/api

Если вы находитесь в стеке .NET с MVC с AngularJS, это то, что вам нужно сделать, чтобы удалить «#» из URL:

1. Настройте базу href на странице _Layout:

2. Затем добавьте следующее в свое угловое приложение config: $locationProvider.html5Mode(true)

3. Выше будет удалять «#» с URL-адреса, но обновление страницы не будет работать, например, если вы находитесь на странице «yoursite.com/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about», refreash даст вам 404. Это потому, что MVC не знает об угловой маршрутизации и шаблоне MVC. будет искать страницу MVC для «https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about», которая не существует в пути маршрутизации MVC. Обходным путем для этого является отправка всего запроса страницы MVC в одно представление MVC, и вы можете сделать это, добавив маршрут, который ловит все

URL:

 routes.MapRoute( name: "App", url: "{*url}", defaults: new { controller = "Home", action = "Index" } ); 

Вы можете настроить html5mode, но это только функционально для ссылок, включенных в html-привязки вашей страницы, и того, как выглядит URL-адрес в адресной строке браузера. Попытка запросить подстраницу без hashtag (с или без html5mode) из любой точки вне страницы приведет к ошибке 404. Например, следующий запрос CURL приведет к ошибке страницы, не найденной, независимо от html5mode:

 $ curl http://foo.bar/phones 

хотя ниже будет возвращена корневая / домашняя страница:

 $ curl http://foo.bar/#/phones 

Причина этого в том, что все, что после hashтага удаляется до того, как запрос поступит на сервер. Поэтому запрос на http://foo.bar/#/portfolio поступает на сервер в качестве запроса на http://foo.bar . Сервер ответит ответом 200 OK (предположительно) для http://foo.bar а агент / клиент обработает остальные.

Поэтому в случаях, когда вы хотите поделиться URL-адресом с другими, у вас нет выбора, кроме как включить hashтег.

Следуйте 2 шагам –
1. Сначала установите $ locationProvider.html5Mode (true) в файле конфигурации приложения.
Для примера –
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Всегда установите внутри своей главной страницы.
Для eg ->

Служба $ location автоматически откажется от метода hash-части для браузеров, которые не поддерживают API истории HTML5.

Мое решение – создать .htaccess и использовать код #Sorian .. без .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] 

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

Добавить в index.html Включить html5mode $ location.html5Mode (true) в app.js.

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

Однако, если я прямо перейду на сайт http://www.javainuse.com/java, вы получите сообщение об ошибке «Ошибка поиска».

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

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

Согласно документации. Вы можете использовать:

 $locationProvider.html5Mode(true).hashPrefix('!'); 

NB: Если ваш браузер не поддерживает HTML 5. Не волнуйтесь: D он имеет резервную копию в режиме hashbang. Таким образом, вам не нужно проверять, if(window.history && window.history.pushState){ ... } вручную

Например: Если вы нажмете: Some URL

В браузере HTML5 : угловой автоматически перенаправляется на example.comhttps://stackoverflow.com/other

В браузере не HTML5 : угловой автоматически перенаправляется на example.com/#!https://stackoverflow.com/other

Этот ответ предполагает, что вы используете nginx в качестве обратного прокси, и вы уже установили для параметра $ locationProvider.html5mode значение true.

-> Для людей, которые могут все еще борется со всеми classными вещами выше.

Разумеется, решение @maxim grach отлично работает, но для решения, как реагировать на запросы, которые не хотят включать hashтег, в первую очередь, что можно сделать, это проверить, отправляет ли php 404, а затем переписать URL-адрес. Ниже приведен код для nginx,

В местоположении php обнаружите ошибку 404 php и перенаправляйте в другое место,

 location ~ \.php${ ... fastcgi_intercept_errors on; error_page 404 = /redirect/$request_uri ; } 

Затем перепишите URL-адрес в адрес перенаправления и прокси-пароль, а затем отправьте URL-адрес своего сайта в адрес моего блога. (Запрос: вопрос только после того, как вы попробовали)

 location /redirect { rewrite ^/redirect/(.*) /$1; proxy_pass http://www.techromance.com; } 

И посмотри волшебство.

И это определенно работает, по крайней мере для меня.

Шаг 1. Внедрите службу $ locationProvider в конструктор конфигурации приложения.

Шаг 2. Добавьте строку кода $ locationProvider.html5Mode (true) в конструктор app config.

Шаг 3: на странице контейнера (посадка, мастер или макет) добавьте тег html, такой как внутри тега.

Шаг 4: удалите все «#» для конфигурации маршрутизации из всех тегов привязки. Например, href = «# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home» становится href = «https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home»; href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about” становится herf = “https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about”; href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/contact “становится href =” контакт ”

  
 
Home
 
About us
 
Contact us
  

Начните с index.html удалить все # из About Us чтобы он выглядел как About Us Теперь в главном теге index.html напишите сразу после последнего метатега .

Теперь в вашей маршрутизации js введите $locationProvider и напишите $locatonProvider.html5Mode(true); Что-то вроде этого:-

 app.config(function ($routeProvider, $locationProvider) { $routeProvider .when("/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home", { templateUrl: "Templates/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home.html", controller: "https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/homeController" }) .when("/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/aboutus",{templateUrl:"Templates/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/aboutus.html"}) .when("/courses", { templateUrl: "Templates/courses.html", controller: "coursesController" }) .when("/students", { templateUrl: "Templates/students.html", controller: "studentsController" }) $locationProvider.html5Mode(true); }); 

Для получения дополнительной информации смотрите это видео https://www.youtube.com/watch?v=XsRugDQaGOo

Просто добавьте $locationProvider In

 .config(function ($routeProvider,$locationProvider) 

а затем добавьте $locationProvider.hashPrefix(''); после

 .otherwise({ redirectTo: '/' }); 

Вот и все.