Suppression de l’identificateur de fragment des URL AngularJS (symbole #)

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

Je veux toujours pouvoir utiliser le bouton retour du navigateur, etc., lorsque je change de vue et que je met à jour l’URL avec des parameters, mais je ne veux pas le symbole #.

Le tutorial 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 #?

Oui, vous devez configurer $locationProvider et définir 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); }]); 

Assurez-vous de vérifier le support du navigateur pour l’API d’historique html5:

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

Pour supprimer la balise de hachage d’une jolie URL et pour que votre code fonctionne après la minification, vous devez structurer votre code comme dans l’exemple ci-dessous:

 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 }); } }]); 

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

Hope, aide quelqu’un.

                 

Dans mon index.html, j’ai ajouté ceci à

  

N’oubliez pas d’installer le rewriter d’url pour iis sur le serveur.

Aussi, si vous utilisez Web Api et IIS, cette URL de correspondance ne fonctionnera pas, car cela modifiera vos appels d’API. Donc, 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

Si vous êtes dans la stack .NET avec MVC avec AngularJS, voici ce que vous devez faire pour supprimer le “#” de l’url:

  1. Configurez votre base href dans votre page _Layout:

  2. Ensuite, ajoutez les informations suivantes dans votre application angular: $locationProvider.html5Mode(true)

  3. Ci-dessus va supprimer “#” de l’URL mais l’actualisation de la page ne fonctionnera pas, par exemple si vous êtes dans “yoursite.com/https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about”, la page refreash vous donnera un 404. C’est parce que MVC ne connaît pas le routage angular et cherchera une page MVC pour ‘https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/about’ qui n’existe pas dans le chemin de routage MVC. La solution consiste à envoyer toutes les demandes de page MVC à une vue MVC unique et vous pouvez le faire en ajoutant une route qui attrape tous

url:

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

Vous pouvez modifier le html5mode mais cela n’est fonctionnel que pour les liens inclus dans les ancres HTML de votre page et comment l’URL se présente dans la barre d’adresse du navigateur. Tenter de demander une sous-page sans le hashtag (avec ou sans html5mode) de n’importe où en dehors de la page entraînera une erreur 404. Par exemple, la requête CURL suivante entraînera une erreur de page introuvable, quel que soit le mode html5:

 $ curl http://foo.bar/phones 

bien que ce qui suit renverra la page racine / https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home:

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

La raison en est que tout ce qui suit le hashtag est supprimé avant que la demande n’arrive sur le serveur. Une requête pour http://foo.bar/#/portfolio arrive donc sur le serveur en tant que demande de http://foo.bar . Le serveur répondra avec une réponse 200 OK (probablement) pour http://foo.bar et l’agent / client traitera le rest.

Donc, si vous souhaitez partager une URL avec d’autres utilisateurs, vous n’avez pas d’autre choix que d’inclure le hashtag.

Suivez 2 étapes-
1. Commencez par définir le $ locationProvider.html5Mode (true) dans le fichier de configuration de votre application.
Par exemple –
angular.module('test', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider) { $locationProvider.html5Mode(true); $urlRouterProvider.otherwise('/'); });

2.Second définir le dans votre page principale.
Pour par exemple ->

Le service $ location utilise automatiquement la méthode de la partie hachée pour les navigateurs qui ne prennent pas en charge l’API HTML5 History.

Ma solution est de créer .htaccess et d’utiliser le code #Sorian .. sans .htaccess J’ai omis de supprimer #

 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] 

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

Ajouter à index.html Activer html5mode $ location.html5Mode (true) dans app.js.

Avec cela l’application fonctionnera bien. Mais uniquement dans les scénarios lorsque vous naviguez depuis l’index.html vers d’autres pages. Par exemple, ma page de base est http://www.javainuse.com. Si je clique sur le lien java, il faudra naviguer correctement sur http://www.javainuse.com/java.

Cependant, si je vais directement sur http://www.javainuse.com/java, la page ne contient aucune erreur.

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

Selon la documentation. Vous pouvez utiliser:

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

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

Par exemple: Si vous cliquez sur: Some URL

Dans le navigateur HTML5 : angular redirecta automatiquement vers example.comhttps://stackoverflow.com/other

Dans Not HTML5 Browser : angular sera automatiquement redirigé vers example.com/#!https://stackoverflow.com/other

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 des difficultés avec tout ce qui précède.

Il est certain que la solution @maxim grach fonctionne bien, mais pour savoir comment répondre aux requêtes qui ne veulent pas que le hashtag soit inclus en premier lieu, vérifiez si php envoie 404, puis réécrivez l’url. Voici le code pour nginx,

Dans l’emplacement de php, détectez l’erreur de 404 php et redirigez-la vers un autre emplacement,

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

Ensuite, réécrivez url dans redirect location et proxy_pass les données, bien sûr, placez votre URL de site Web à la place de l’URL de mon blog. (Demande: interrogez seulement après l’avoir essayé)

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

Et vois la magie.

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

Étape 1: Injecter le service $ locationProvider dans le constructeur de la configuration de l’application

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

Étape 3: dans la page du conteneur (landing, master ou layout), ajoutez une balise HTML telle que dans la balise.

Étape 4: supprimer tout “#” pour le routage de la configuration de toutes les balises d’ancrage. Par exemple, href = “# https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/home” devient 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” devient 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 “devient href =” https://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol/contact

   

Démarrer à partir de index.html supprimer tous les # de About Us pour qu’ils ressemblent à About Us . de index.html écrivez juste après la dernière balise META .

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

 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); }); 

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

Ajoutez simplement $locationProvider In

 .config(function ($routeProvider,$locationProvider) 

puis ajoutez $locationProvider.hashPrefix(''); après

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

C’est tout.