web-dev-qa-db-fra.com

Comment supprimer le signe "#" dans les URL angular-ui-router

J'utilise la bibliothèque angular-ui-router et j'ai un problème avec les URL.

J'ai le code suivant:

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>

Cela fonctionne, mais lorsque je supprime '#' de la <a> tag cela ne fonctionne pas.

Comment puis-je supprimer le signe '#' de l'URL?

javascriptangularjsangular-ui-router
74
Niezborala

Vous devez activer HTML5Mode si vous souhaitez une navigation sans balises de hachage:

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

Vous devrez également indiquer à angular l'URL racine de votre application en ajoutant le code suivant au <head> de votre fichier HTML:

<base href="/">

Sachez que la prise en charge du mode HTML5 dépend du navigateur. Pour ceux qui ne prennent pas en charge l’API d’historique, Angular se repliera sur hashbang .

114
Simon Belanger

Si vous utilisez Angular 1.6 + , vous devrez également supprimer le hashPrefix de l'URL:

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

N'oubliez pas de changer également de base:

<head>
    ...
    <base href="/">
</head>
9
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'         
            })
    }

dans votre index.php ou index.html dans la balise <head>

< base href="/" >

pour CodeIgniter:

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