Comment faire pour supprimer le hachage # à partir de la angularjs ng-route

Je suis en train d'utiliser le locationProvider pour supprimer le mot-clic à partir de l'url itinéraires en angular js, mais il me donne l'erreur.

app.js

var eclassApp = angular.module('eclassApp', 
    ['ngRoute', 'eclassControllers', ]
);

eclassApp.config(['$routeProvider','$locationProvider',
    function ($routeProvider, $locationProvider){
        $routeProvider.
            when('/',{
                templateUrl: '/html/student-list.html',
                controller: 'StudentsListCtrl',
            }).
            when('/students/:studentId',{
                templateUrl: '/html/student-details.html',
                controller: 'StudentDetailsCtrl',

            }).otherwise({
                redirectTo: '/students'
            });
            $locationProvider.htmlMode(true);
    }]
);

l'erreur:

 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=eclassApp&p1=TypeE…oogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.13%2Fangular.min.js%3A17%3A1)

Suis-je raté quelque chose?

EDIT: l'appel de la html5Mode fonction avec les options de l'objet comme ce

$locationProvider.html5Mode({
    enabled:true
})

j'obtiens l'erreur suivante (modifié angulaire complète pour obtenir une meilleure explication de l'erreur istead de la version compacte)

Error: [$location:nobase] $location in HTML5 mode requires a <base> tag to be present!

http://errors.angularjs.org/1.3.13/emplacement$/nobase

Ne confondez pas les hashtags (qui sont des identifiants pour la recherche de liens) avec des identificateurs de fragment dans les Url. La seule chose qu'ils ont en commun est qu'ils utilisent le dièse.
Je pense que cet article peut vous aider avec ce que scotch.io/quick-tips/...
oui c'est vrai...je ment de hachage d'un caractère.

OriginalL'auteur Apostolos | 2015-02-20

44

vous pouvez utiliser le $locationProvider comme celui -
```
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
```
Alternativement, vous pouvez utiliser la base de balise dans votre index.html (je suppose que c'est votre page d'atterrissage)
```
<head>
  <base href="/">
</head>
```
La suppression de la base de la balise peut causer certains effets secondaires chez les vieux IE navigateur IE9

oui, je comprends. Mais je ne peux pas comprendre la base et les url relatives. Mes fichiers html sont à l'intérieur de dossier html donc c'est localhost:8000/html/index.html. Je suppose que je dois installer la base de la balise <base href="/html"> parce que lorsque j'ai mis href "/" ça ne marchera pas. Je dois mettre de la première url "/html" dans l'app config. Pourriez-vous expliquer un peu comment la base de travaux?
Je pense que j'ai eu!
A été touché par cette nouvelle exigence, tandis que la mise à niveau à partir angulaire de l'itinéraire 1.2.x pour 1.3.13. Choisi votre deuxième solution pour le résoudre.

OriginalL'auteur Rabi
4

Étapes pour se débarrasser des # à partir de l'URL:
1. Injecter $locationProvider dans la configuration() la fonction angulaire de la racine du module et de l'ensemble html5Mode() true
```
angular.module( 'app', [ ] ).config(function( $locationProvider) {
   $locationProvider.html5Mode(true);
});
```
2. Inclure base balise dans la section de la tête de la première page de chargement de l'application..
OriginalL'auteur Giridhar Kumar
1

Il y a une virgule supplémentaire dans le tableau des dépendances que vous avez. Vous pouvez supprimer la virgule ainsi que d'inclure la base de balise dans votre section head du code html que vous avez et que vous êtes bon avec la suppression de hashtags
```
<base href="/">
```
Votre tableau des dépendances:
```
var eclassApp = angular.module('eclassApp', ['ngRoute', 'eclassControllers'] ); 
```
oui....Python me permet ces virgules, donc je m'embrouille parfois
Ouais python n'est que pour moi aussi, le problème à résoudre?
oui je vous remercie. Maintenant, j'ai une autre question concernant le routage d'url dans angulaire pour laquelle je vais ouvrir une autre question 🙂

OriginalL'auteur V31
1

Je sais que c'est un ans mais j'ai toujours, à ce jour, n'ont pas trouvé un concise et complète de la solution. C'est toutes les pièces et de morceaux de plusieurs réponses sur le net, donc je vais l'expliquer ici en détail et nous espérons que cela pourrait être le seul endroit où d'autres visiteurs peuvent obtenir une réponse complète. *Je voudrais ajouter à la réponse, mais c'est trop long à faire. Donc, nous allons commencer.

Vous devez d'abord télécharger le ngRoute ou angular-ui-router. Je choisis le second parce qu'il contient déjà tous que c'est dans ngRoute et il a encore plus de fonctionnalités. Alors, pourquoi pas?
1. Aller à votre CMD et tapez cette
```
npm install --save angular-ui-router
```
2. Allez maintenant à votre app.js fichier et écrire vos routes, comme ce
```
var app = angular.module('ngCribs', ['ui.bootstrap', 'ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
    //Application routes
    $stateProvider
        .state('index', {
            url: '/',
            templateUrl: 'views/partials/home.html'
        })
        .state('listings', {
            url: '/listings',
            templateUrl: 'views/partials/listings-list.html'
        });

    //For unmatched routes
    $urlRouterProvider.otherwise('/');

    $locationProvider.html5Mode(true);

}]);
```
3. Pour votre prochaine étape, vous devez aller à votre <head> et les ajouter à votre répertoire de base
```
<base href="/"> </base>
```
4. Maintenant, vous ne devriez pas avoir le hashtag plus MAIS, si vous allez à une page autre que / et le recharger, vous obtenez un message d'erreur et la page ne se charge pas. Vous devez dire à votre serveur pour le traitement de votre chemin et le répertoire de base. Donc pour remédier à ce dilemme, vous avez besoin d'un serveur et je préfère Exprimer, mais vous pouvez utiliser d'autres. Je recommande Exprimer parce qu'à un certain point, vous aurez besoin de s'impliquer avec une MOYENNE de piles et devinez quoi? Autres que Mongo, vous utilisez déjà Angulaire et le Nœud, alors pourquoi ne pas ajouter Express pour le mélange?! Aller à votre CMD à nouveau et de le faire:
```
$ npm install express --save
```
5. Maintenant que vous avez un serveur installé, vous devez créer un server.js fichier et le mettre dans la base de votre répertoire et mettez-y ce qui suit. *vérifiez que vos chemins de dossier correspondent à votre répertoire de sorte qu'ils sont trouvés.
```
var express = require('express');
var server = express();

server.use(express.static(__dirname + '/'));
server.set('views', __dirname + 'views');
server.set('js', __dirname + 'js');
server.set('css', __dirname + 'css');

server.get('/', function(req, res){
    res.render('index.ejs');
});

server.all('/*', function(req, res, next) {
    //Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

//the port you want to use
var port = 3006;
server.listen(port, function(){
    console.log('server listening on port' + port)
});
```
6. Pas encore fait. Dès que vous essayez d'exécuter le serveur sur le port 3006, vous obtiendrez une erreur. De retour à CMD et tapez ceci:
```
npm install ejs --save
```
7. Vous avez terminé, maintenant il vous suffit de lancer votre serveur et de la laisser ouverte. Donc à partir de ce moment, tout ce que vous devez faire dans le CMD, vous aurez besoin d'une deuxième fenêtre CMD. (En général, j'ai 4 cours d'exécution à l'époque. 1-serveur 2-Gulp pour BrowserSync, 3-MongoDB, 4-télécharger toutes les dépendances que je peut avoir besoin en cours de route). Alors, allez à votre CMD et faire exécuter votre serveur et de minimiser les
```
node server.js
```
8. Maintenant, vous êtes libre d'aller à localhost:3006 et de naviguer comme si vous étiez dans un serveur qui est déjà config pour vous.
OriginalL'auteur LOTUSMS
0

Essayer cette ligne:

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

avant cette ligne:

$routeProvider.

OriginalL'auteur Luis Teijon
0

Testé sur Angulaire de la version 1.6.1:

Il nécessite 3 étapes pour supprimer le hashtag (#) à partir de l'URL.

Étape 1: activer html5mode sur locationProvider dans Config. exemple de code:
```
app.config(function($locationProvider, $routeProvider){
            $locationProvider.html5Mode(true);
            $routeProvider.when('/', {templateUrl: 'partials/home.html'}).when('/info', {templateUrl: 'partials/info.html'});
        });
```
Étape 2: fournir une base de href attribut dans la section en-tête de index.html. Cela devrait être placé sur le dessus de tous les script et CSS des balises. le href attributs définit le chemin d'accès relatif de votre projet. exemple de code: base href="/demo/". Ma version de démonstration de l'application se trouve sur le répertoire racine du serveur web Apache. Si votre application est un sous-répertoire, utilisez: base href="/demo/sub-directory/" ou base href="http://localhost/demo/sub-directory/"

Étape 3: Si vous utilisez cette application AngularJS sur le serveur Apache (Wamp, Mamp, etc): à partir d'autres StackOverflow postes, vous devez activer url-rewrite module. Comme de version d'Apache 2.2+, cela peut être réalisé en utilisant la commande: FallbackResource. Exemple de code: créer un .htaccess fichier sur la racine du serveur Apache. Ajouter la commande ci-dessous et redémarrez le serveur. Fournir le chemin d'accès relatif index.html qui gère l'erreur 404 due angulaires-fonctionnalité de route. Cela devrait résoudre actualiser/accès profonde url et toutes les erreurs 404.
```
FallbackResource /demo/sub-directory/index.html
```
OriginalL'auteur Raj Malakpet

Etape 1: Injecter $locationProvider dans config() fonction angulaire de la racine
module et de l'ensemble html5Mode() à true, la syntaxe est de la changer sur angular 1.3
version.
```
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});
```
Etape 2: ajouter ci-dessous les paramètres sur web.config

<system.webServer>
  <rewrite>
    <rules>
      <clear />
      <rule name="AngularJS" enabled=true 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_FILENAME}" pattern"^/(api)" negate="true" />
          </conditions>
        <action type="Rewrite" url="/index.html" />
      </rule>
    </rules>
  </rewrite>
</system.webServer>

C'est un travail pour moi, prendre un coup d'oeil à l'image

OriginalL'auteur alpesh

Vous devez vous connecter pour publier un commentaire.