web-dev-qa-db-fra.com

Comment supprimer le hash # de la route angularjs

J'essaie d'utiliser locationProvider pour supprimer le hashtag des routes url dans js angulaire, mais cela 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 manque quelque chose?

EDIT: appeler la fonction html5Mode avec un objet options comme ceci

$locationProvider.html5Mode({
    enabled:true
})

j'obtiens l'erreur suivante (changé en angulaire complet pour obtenir une meilleure explication de l'erreur au lieu de la version minifiée)

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

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

javascriptangularjsangular-routing
14
Apostolos

vous pouvez utiliser le $ locationProvider comme ceci -

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

Alternativement, vous pouvez utiliser la balise de base dans votre index.html (je suppose que ceci est votre page de destination)

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

La suppression de la balise de base peut entraîner des effets secondaires dans l'ancien navigateur IE tel que IE9.

44
Rabi

Étapes à suivre pour se débarrasser de # à partir d'une URL:

  1. Injecter $ locationProvider dans la fonction config () du module racine angulaire et définir html5Mode () sur true

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

  2. Incluez la balise base dans la section head de la première page de chargement de l'application.

4
Giridhar Kumar

Il y a une virgule supplémentaire dans le tableau de dépendance que vous avez. Vous pouvez supprimer la virgule et inclure une balise de base dans votre section de tête du code HTML que vous possédez.

<base href="/">

Votre tableau de dépendance:

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

Je sais que cela fait un an mais je n'ai toujours pas trouvé de solution complète et concise à ce jour. Ce sont des morceaux de plusieurs réponses sur le net, je vais donc l'expliquer ici en détail et j'espère que ce sera le seul endroit où les autres visiteurs pourront obtenir une réponse complète. * Je voudrais annexer à la réponse, mais c'est trop long pour le faire. Alors, commençons. 

Vous devez d’abord télécharger ngRoute ou angular-ui-router. J'ai choisi ce dernier parce qu'il contient déjà tout ce qui se trouve dans ngRoute et qu'il a encore plus de fonctionnalités. Alors pourquoi pas? 

  1. Allez dans votre CMD et tapez ceci

    npm install --save angular-ui-router

  2. Maintenant, allez dans votre fichier app.js et écrivez 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 accéder à votre <head> et ajouter votre répertoire de base.

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

  4. A présent, vous ne devriez plus avoir le hashtagMAIS, si vous allez sur une page autre que / et le rechargez, vous obtenez une erreur et la page ne se charge pas. Vous devez indiquer à votre serveur comment traiter votre chemin et votre répertoire de base. Donc, pour résoudre ce dilemme, vous avez besoin d’un serveur et je préfère Express, mais vous pouvez en utiliser d’autres. Je recommande Express car, à un moment donné, vous devrez vous impliquer dans MEAN Stacks et devinez quoi? Autre que Mongo, vous utilisez déjà Angular et Node, alors pourquoi ne pas ajouter Express au mélange?! Allez à nouveau à votre CMD et faites ceci:

    $ npm install express --save

  5. Maintenant qu'un serveur est installé, vous devez créer un fichier server.js, le placer dans la base de votre répertoire et y placer les éléments suivants. * Assurez-vous que vos chemins de dossier correspondent à votre répertoire afin 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 fini. Dès que vous essayez d'exécuter le serveur sur le port 3006, vous obtenez une erreur. Retournez dans CMD et tapez ceci:

    npm install ejs --save

  7. Vous avez terminé, il ne vous reste plus qu'à exécuter votre serveur et à le laisser ouvert. Ainsi, à partir de maintenant, tout ce que vous devez faire dans le CMD, vous aurez besoin d’une seconde fenêtre CMD. (J'en ai normalement 4 à la fois. 1 serveur, 2-Gulp pour BrowserSync, 3-MongoDB, 4-Pour télécharger toutes les dépendances dont j'ai besoin en cours de route). Allez donc dans votre CMD et faites ceci pour faire fonctionner votre serveur et le minimiser.

    node server.js

  8. Maintenant, vous êtes libre d'aller à localhost:3006 et de naviguer comme si vous étiez dans un serveur réel déjà configuré pour vous.

1
LOTUSMS

Testé sur la version angulaire 1.6.1:

Il faut 3 étapes pour supprimer le hashtag (#) de l’URL.

Étape 1: activez 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'});
        });

Étape 2: indiquez un attribut href de base dans la section d'en-tête de index.html. Cela devrait être placé sur tous les scripts et les balises CSS. les attributs href définissent le chemin relatif de votre projet. exemple de code: base href="/demo/". Mon application de démonstration est située dans 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 exécutez cette application AngularJS sur un serveur Apache (Wamp, Mamp, etc.): à partir d'autres publications StackOverflow, vous devez activer le module url-rewrite. À partir de la version 2.2 ou ultérieure d'Apache, vous pouvez utiliser la commande suivante: FallbackResource. Exemple de code: créez un fichier .htaccess dans le répertoire racine du serveur Apache. Ajoutez la commande ci-dessous et redémarrez le serveur. Indiquez le chemin relatif index.html qui traite l'erreur 404 due à la fonctionnalité de routage angulaire. Cela devrait résoudre les problèmes d'actualisation/d'accès à Deep-Url et à toutes les erreurs 404.

FallbackResource /demo/sub-directory/index.html
0
Raj Malakpet

  • Step1 : Injectez $locationProvider dans la fonction config() de la racine angulaire Module et définissez html5Mode() sur true, la syntaxe est modifiée sur angular 1.3.__ version.

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

  • Étape 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
alpesh