All geek questions in one place

AngularJS: How to remove #! / (Bang Prefix) from URL?

I already did $locationProvider.html5Mode(true); but it does not work. Whenever I access http://example.com , it goes to http://example.com/#!/ . The code is given here:

 var myApp = angular.module('myApp', ['ui.router', 'ui.bootstrap']); myApp.config(['$qProvider', function ($qProvider) { $qProvider.errorOnUnhandledRejections(false); }]); myApp.config(function($stateProvider, $urlRouterProvider,$locationProvider) { // For any unmatched url, redirect to EXTRANET home page $urlRouterProvider.otherwise('/'); // Now set up the states $stateProvider .state('listrole', { url: "/list-role", views: { 'main-content': { templateUrl: rootUrl+ 'views/main.html', controller: 'rolesCtrl' } } }) $locationProvider.hashPrefix(''); $locationProvider.html5Mode(true); });

Update I added $locationProvider.hashPrefix(''); but no difference. Also let me tell you that I enter the address in the address bar and press enter. Am I doing the right thing? How does the browser detect that it does not need to be updated from the server?

Update # 2

Ideally, I want a URL like http://example.com and http://example.com/#!/list-role to http://example.com/list-role . Right now http://example.com/list-role gives 404

Update # 3

I use nginx proxy if that helps.

Update # 4

Remote cache. Now I can see http://example.com instead of http://example.com/#! but still http://example.com/list-role gives 404

+5
source share
6 answers

If you want to remove this prefix, add this code to your config:

 appModule.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);

Source here for more information.

Update

If you want to remove the entire prefix ( # and not only ! ), You can try this solution :

1) Activate HTML5 mode and remove the prefix ! in the configuration of your module

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

2) And then set base to / in <head> on your index.html

 <head> ... <base href="/"> </head>
+13
source

If you are on the .NET stack with MVC using AngularJS, this is what you need to do to remove the "#" from the URL:

1. Set up your basic href on the _Layout page:

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

2. Then add the following to your angular application configuration:

 $locationProvider.html5Mode(true) $locationProvider.hashPrefix("!");
0
source

Below code will remove the exclamation mark (!) In the URL

 $locationProvider.hashPrefix('');

or go to Routing Problem with AngularJS project using yeoman setting

it worked for me

0
source

Add the <head> <base href="/foldername/"> </head> to your html file

and this is for your application .js $locationProvider.html5Mode(true);

it is for .htaccess to create a file that you do not have.

 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] RewriteRule ^ /foldername/
0
source
  • Method 1

Add the following to app.js:

 app.config(['$locationProvider', function($locationProvider) { $locationProvider.hashPrefix(''); }]);
  • Method 2

Put it down! after # to solve the problem. Check out the code below.

 <div class="collapse navbar-collapse" id="js-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#!/">Home</a></li> <li><a ng-href="#!/about">About</a></li> <li><a ng-href="#!/">Contact</a></li> </ul> </div>
0
source 
 $locationProvider.hashPrefix('');

Please check this question: AngularJS's ui-router corner app has / #! / In the URL

-1
source

Source: https://habr.com/ru/post/1262271/

More articles:


All Articles