Comment enlever le hachage # de l'angularjs ng-route

j'essaye d'utiliser le locationProvider pour supprimer le hashtag des routes d'url dans angular js mais il me donne une 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)

Est-ce que je rate quelque chose?

EDIT: appeler la fonction html5Mode avec l'objet options comme ceci

$locationProvider.html5Mode({
    enabled:true
})

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

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

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

14
demandé sur fracz 2015-02-20 16:09:22

7 réponses 

$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
});

alternativement, vous pouvez utiliser la balise de base dans votre index.html (je suppose que c'est votre page d'accueil)

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

Suppression de la base de la balise peut causer certains effets secondaires chez les vieux IE navigateur IE9

43
répondu Rabi 2015-02-20 13:21:07

Étapes pour se débarrasser des # à partir de l'URL:

  1. Injecter $locationProvider dans config () fonction de module de racine angulaire et mettre html5Mode () à true

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

  2. Include base étiquette dans la section de tête de la première page de chargement de l'application..

4
répondu Giridhar Kumar 2016-02-14 13:22:16

il y a une virgule supplémentaire dans le tableau de dépendances que vous avez. Vous pouvez supprimer la virgule Ainsi que l'étiquette de base include dans votre tête section du html que vous avez et vous êtes bon avec suppression des hashtags

<base href="/">

votre tableau de dépendances:

var eclassApp = angular.module('eclassApp', ['ngRoute', 'eclassControllers'] );
1
répondu V31 2015-02-20 13:24:49

je sais que c'est vieux d'un an, mais je n'ai toujours pas trouvé de solution concise et complète. C'est tout des morceaux de plusieurs réponses partout sur le net, donc je vais l'expliquer ici en détail et j'espère que ce pourrait être le seul endroit où les autres visiteurs peuvent obtenir une réponse complète. *Je joindrais la réponse à celle-ci, mais c'est trop long. Donc, nous allons commencer.

vous devez d'abord télécharger soit ngRoute soit angular-ui-router. Je choisis le dernier parce qu'il contient déjà tous que c'est dans ngRoute et il a encore plus de fonctionnalités. Alors, pourquoi pas?

  1. allez à votre CMD et tapez ceci

    npm install --save angular-ui-router

  2. allez Maintenant à votre application.fichier js et écrire vos itinéraires comme ceci

    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 ajouter votre répertoire de base

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

  4. maintenant, vous ne devriez plus avoir le hashtag mais, si vous allez à une page autre que / et rechargez - le, vous obtenez une erreur et la page ne se charge pas. Vous devez dire à votre serveur Comment traiter votre chemin et votre 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 Express parce qu'à un moment donné vous aurez besoin de s'impliquer avec les empilements MEAN et devinez quoi? En dehors de Mongo, vous utilisez déjà Angular et Node, alors pourquoi ne pas ajouter Express au mix?! Aller pour votre CMD encore et faire ceci:

    $ npm install express --save

  5. Maintenant que vous avez un serveur installé, vous devez créer un server.js le fichier et le mettre dans la base de votre répertoire et mettez-y ce qui suit. * assurez-vous que vos chemins de dossiers correspondent à votre répertoire pour qu'ils soient 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 sont faites, maintenant vous avez juste besoin d'exécuter votre serveur et le laisser ouvert. Donc, à partir de ce point, tout ce que vous devez faire dans le CMD, vous aurez besoin d'une deuxième fenêtre CMD. (J'en ai normalement 4 en cours d'exécution à ce moment-là. 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 le

    node server.js

  8. Maintenant, vous êtes libre d'aller à l' localhost:3006 et naviguer comme si vous y étiez dans un serveur en direct qui est déjà configuré pour vous.

1
répondu LOTUSMS 2016-11-06 05:27:41

Essayez cette ligne:

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

avant cette ligne:

$routeProvider.

0
répondu Luis Teijon 2016-12-08 01:42:53

testé sur la version 1.6.1 angulaire:

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

Etape 1: Activer le html5mode sur locationProvider via Config. exemple de code: 

app.config(function($locationProvider, $routeProvider){
            $locationProvider.html5Mode(true);
            $routeProvider.when('/', {templateUrl: 'partials/home.html'}).when('/info', {templateUrl: 'partials/info.html'});
        });

Etape 2: Fournir une base href attribut dans la section de tête de index.html. Ceci devrait être placé en haut de toutes les étiquettes de script et CSS. href attributes définit le chemin relatif de votre projet. exemple de code: base href="/demo/". Mon application de démonstration s'assoit sur root répertoire 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/"

Etape 3: Si vous exécutez cette application AngularJS sur le serveur Apache (Wamp, Mamp etc): à partir d'autres messages StackOverflow, vous devez activer url-rewrite module. À partir de la version 2.2 + D'Apache, ceci peut être réalisé en utilisant la commande:FallbackResource. Exemple de code: créer un .htaccess fichier sur le répertoire racine du serveur Apache. Ajouter la commande ci-dessous et redémarrez le serveur. Fournir le chemin d'accès relatif index.html qui traite l'erreur 404 causée par la fonctionnalité due angular-route. Cela devrait résoudre actualiser/accès profonde url et toutes les erreurs 404.

FallbackResource /demo/sub-directory/index.html
0
répondu Raj Malakpet 2017-06-06 02:02:49

  • Etape 1: Injecter $locationProviderhtml5Mode() à true, la syntaxe est changée sur angular 1.3 version.

    $locationProvider.html5Mode({
    enabled: true,
    requireBase: false
});

  • Etape 2: ajouter les paramètres ci-dessous 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>
0
répondu alpesh 2018-08-23 16:55:46