web-dev-qa-db-fra.com

Suppression de l'identifiant de fragment des URL AngularJS (# symbole)

Est-il possible de supprimer le symbole # des URL angular.js?

Je veux toujours pouvoir utiliser le bouton Précédent du navigateur, etc. lorsque je change de vue et que je mets à jour l'URL avec des paramètres, mais je ne veux pas du symbole #.

Le tutoriel routeProvider est déclaré comme suit:

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

Puis-je éditer ceci pour avoir la même fonctionnalité sans le #?

angularjsurlngroute
248
Tim Webster

Oui, vous devez configurer $locationProvider et régler html5Mode sur 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);

  }]);
246
Maxim Grach

Assurez-vous de vérifier la prise en charge du navigateur pour l'API d'historique HTML 5:

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

Pour supprimer la balise de hachage pour un joli URL et pour que votre code fonctionne après la minification vous devez Structurer votre code de la manière suivante

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: <head> <base href="/">

         // to know more 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
          });
        }
    }]);
45
Digitlimit

J'écris une règle dans web.config après que $locationProvider.html5Mode(true) soit défini dans app.js. 

Hope, aide quelqu'un.

  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

Dans mon index.html, j'ai ajouté ceci à <head>

<base href="/">

N'oubliez pas d'installer le programme de réécriture d'URL pour IIS sur le serveur.

De plus, si vous utilisez Web Api et IIS, cette URL de correspondance ne fonctionnera pas car elle modifiera vos appels à l'API. Alors ajoutez une troisième entrée (troisième ligne de condition) et donnez un modèle qui exclura les appels de www.yourdomain.com/api

18
Yagiz Ozturk

Si vous êtes dans la pile .NET avec MVC avec AngularJS, voici ce que vous devez faire pour supprimer le "#" de l'URL: 

  1. Configurez votre href de base dans votre page _Layout: <head> <base href="/"> </head>

  2. Ensuite, ajoutez ce qui suit dans votre configuration d'application angulaire: $locationProvider.html5Mode(true)

  3. Ci-dessus supprimera "#" de l'URL mais l'actualisation de la page ne fonctionnera pas, par exemple. si vous êtes dans la page "yoursite.com/about", vous obtiendrez un 404, c'est parce que MVC ne connaît pas le routage angulaire et que, par modèle MVC, il recherchera une page MVC qui n'existe pas dans MVC chemin de routage. La solution consiste à envoyer toutes les demandes de page MVC à une seule vue MVC. Pour ce faire, vous pouvez ajouter un itinéraire qui capture tous les éléments. 

uRL: 

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

Vous pouvez modifier le mode html5 mais cela n’est fonctionnel que pour les liens inclus dans les ancres html de votre page et l’apparence de l’URL dans la barre d’adresse du navigateur. Tenter de demander une sous-page sans le hashtag (avec ou sans HTML5mode) à partir de n’importe où en dehors de la page entraînera une erreur 404. Par exemple, la demande CURL suivante entraînera une erreur de page introuvable, indépendamment de html5mode:

$ curl http://foo.bar/phones

bien que ceci retourne la page racine/home:

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

La raison en est que rien après le hashtag est enlevé avant que la requête n'arrive au serveur. Donc, une demande pour http://foo.bar/#/portfolio arrive sur le serveur en tant que demande pour http://foo.bar. Le serveur répondra avec 200 OK (probablement) pour http://foo.bar et l'agent/client traitera le reste. 

Ainsi, dans les cas où vous souhaitez partager une URL avec d'autres personnes, vous n'avez d'autre choix que d'inclure le hashtag. 

5
chris

Ma solution est de créer .htaccess et d’utiliser du code sorian.

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]
3
Thomas Knápek

Comme il a été mentionné ci-dessus, les réponses sont les suivantes:

Ajoutez à index.html Activez html5mode $ location.html5Mode (true) dans app.js.

Avec cela, l'application fonctionnera bien. Mais uniquement dans les scénarios lorsque vous naviguez du fichier index.html vers d'autres pages. Par exemple, ma page de base est www.javainuse.com. Si je clique sur le lien Java, la navigation vers www.javainuse.com/Java sera correcte.

Cependant, si je vais directement à www.javainuse.com/Java, la page ne sera pas une erreur trouvée.

Pour résoudre ce problème, nous devons utiliser la réécriture d'URL. Dot net nécessite la réécriture d'URL pour IIS.

Si vous utilisez Tomcat, la réécriture d'URL devra être effectuée à l'aide de Tuckey. Peut obtenir plus d'informations sur la réécriture d'URL ici

3
Rameez

Je suppose que c'est vraiment tard pour ça. Mais l’ajout de la configuration ci-dessous aux importations d’app.module fait le travail

RouterModule.forRoot(routes, { useHash: false })
1
Sagar Bhat

Commencez à partir de index.html, supprimez tous les # de <a href="#/aboutus">About Us</a>. Il doit donc ressembler à <a href="/aboutus">About Us</a>.Maintenant dans la balise head de index.html, écrivez <base href="/"> juste après le dernier meta tag.

Maintenant, dans votre routage, injectez $locationProvider et écrivez $locatonProvider.html5Mode(true); Quelque chose comme ça: -

app.config(function ($routeProvider, $locationProvider) {
    $routeProvider
        .when("/home", {
            templateUrl: "Templates/home.html",
            controller: "homeController"
        })
            .when("/aboutus",{templateUrl:"Templates/aboutus.html"})
            .when("/courses", {
                templateUrl: "Templates/courses.html",
                controller: "coursesController"
            })
            .when("/students", {
                templateUrl: "Templates/students.html",
                controller: "studentsController"
            })
        $locationProvider.html5Mode(true);
    });

Pour plus de détails, regardez cette vidéo https://www.youtube.com/watch?v=XsRugDQaGOo

1
Aniket Jha

Cette réponse suppose que vous utilisez nginx en tant que proxy inverse et que vous avez déjà défini $ locationProvider.html5mode sur true.

-> Pour les personnes qui pourraient encore avoir du mal avec tous les trucs cools ci-dessus.

Certes, la solution @maxim grach fonctionne bien, mais vous devez vérifier si php envoie 404, puis réécrire l’URL. Voici le code pour nginx,

Dans l’emplacement php, détecte l’erreur 404 php et redirige vers un autre emplacement, 

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

Puis réécrivez l’URL dans l’emplacement de redirection et proxy_pass les données, bien sûr, placez l’URL de votre site Web à la place de celle de mon blog. (Demande: questionnez ceci seulement après que vous ayez essayé)

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

Et voir la magie.

Et ça marche définitivement, au moins pour moi.

1
Satys

Selon la documentation. Vous pouvez utiliser:

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

NB: Si votre navigateur ne supporte pas le HTML 5. Ne vous inquiétez pas: il a repli en mode hashbang. Donc, vous n'avez pas besoin de vérifier manuellement avec if(window.history && window.history.pushState){ ... }

Par exemple: Si vous cliquez sur: <a href="/other">Some URL</a> 

Dans le navigateur HTML5 : Angular sera automatiquement redirigé vers example.com/other

Dans le navigateur non HTML5 : Angular sera automatiquement redirigé vers example.com/#!/other

1
Efriandika Pratama

Étape 1: Injectez le service $ locationProvider dans le constructeur de la configuration d'application.

Étape 2: Ajoutez la ligne de code $ locationProvider.html5Mode (true) au constructeur de la configuration d'application.

Étape 3: dans la page conteneur (atterrissage, maître ou mise en page), ajoutez une balise HTML telle que <base href="/"> à l'intérieur de la balise.

Étape 4: supprimez tous les "#" de la configuration de routage de toutes les balises d'ancrage. Par exemple, href = "# home" devient href = "home"; href = "# about" devient herf = "about"; href = "# contact "devient href =" contact "

 <ul class="nav navbar-nav">
     <li><a href="home">Home</a></li>
     <li><a href="about">About us</a></li>
     <li><a href="contact">Contact us</a></li>
</ul>
0
Thomas.Benz