Come rimuovere l’hash # dalla rotta angularjs ng

Sto provando ad usare il locationProvider per rimuovere l’hashtag dalle rotte url in js angular ma mi dà errore.

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’errore:

  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) 

Mi sto perdendo qualcosa?

EDIT: chiama la funzione html5Mode con object options come questo

     $locationProvider.html5Mode({ enabled:true }) 

    ottengo il seguente errore (modificato in full angular per ottenere una spiegazione migliore dell’errore della versione minificata)

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

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

    puoi usare $ locationProvider come questo –

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

    In alternativa, puoi usare il tag base nel tuo index.html (suppongo che questa sia la tua pagina di destinazione)

        

    La rimozione del tag base può causare alcuni effetti collaterali nel vecchio browser IE come IE9

    Passi per sbarazzarsi di # dall’URL:

    1. Iniettare $ locationProvider nella funzione config () del modulo root angular e impostare html5Mode () su true

       angular.module( 'app', [ ] ).config(function( $locationProvider) { $locationProvider.html5Mode(true); }); 
    2. Includere il tag di base nella sezione principale della prima pagina di caricamento dell’applicazione.

    C’è una virgola in più nella serie di dipendenze che hai. Puoi rimuovere la virgola e includere il tag di base nella sezione principale dell’html che hai e stai bene con la rimozione degli hashtag

      

    Il tuo array di dipendenze:

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

    So che questo ha un anno, ma a tutt’oggi non ho ancora trovato una soluzione concisa e completa a questo. Sono tutti pezzi di diverse risposte in tutta la rete, quindi ho intenzione di spiegarlo qui in dettaglio e spero che potrebbe essere l’unico posto in cui gli altri visitatori possono ottenere una risposta completa. * Vorrei aggiungere la risposta, ma questo è troppo lungo per farlo. Quindi iniziamo.

    Per prima cosa è necessario scaricare ngRoute o angular-ui-router. Scelgo quest’ultimo perché contiene già tutto ciò che è in ngRoute e ha ancora più funzioni. Quindi perche no?

    1. Vai al tuo CMD e digita questo

       npm install --save angular-ui-router 
    2. Ora vai nel tuo file app.js e scrivi i tuoi percorsi in questo modo

       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. Per il tuo prossimo passo, devi andare al tuo e aggiungere la tua directory di base

         
    4. A questo punto, non dovresti più avere l’hashtag MA , se vai su una pagina diversa da / e la ricarica, ottieni un errore e la pagina non viene caricata. Devi dire al tuo server come trattare il tuo percorso e la directory di base. Quindi per curare questo dilemma, hai bisogno di un server e preferisco Express, ma puoi usare gli altri là fuori. Raccomando Express perché a un certo punto dovrai essere coinvolto con stack MEAN e indovina cosa? Oltre a Mongo, stai già utilizzando Angular e Node, quindi perché non aggiungere Express al mix ?! Vai di nuovo al tuo CMD e fai questo:

       $ npm install express --save 
    5. Ora che hai installato un server, devi creare un file server.js e metterlo nella base della tua directory e inserire quanto segue. * assicurati che i percorsi delle cartelle corrispondano alla tua directory in modo che vengano trovati.

       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. Non ancora fatto. Non appena si tenta di eseguire il server sulla porta 3006 si otterrà un errore. Torna a CMD e scrivi questo:

       npm install ejs --save 
    7. Il gioco è fatto, ora devi solo avviare il tuo server e lasciarlo aperto. Quindi da questo punto in avanti, tutto ciò che devi fare nel CMD, avrai bisogno di una seconda finestra CMD. (Di solito ne ho 4 in esecuzione: 1-server, 2-Gulp per BrowserSync, 3-MongoDB, 4-Per scaricare tutte le dipendenze di cui potrei avere bisogno lungo la strada). Quindi vai al tuo CMD e fallo per eseguire il tuo server e minimizzarlo

       node server.js 
    8. Ora sei libero di andare su localhost:3006 e navigare come se fossi in un server live che è già configurato per te.

    Prova questa linea:

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

    prima di questa linea:

    $routeProvider.

    Testato su Angular 1.6.1 versione:

    Richiede 3 passaggi per rimuovere l’hashtag (#) dall’URL.

    Passaggio 1: abilitare html5mode su locationProvider tramite Config. Codice d’esempio:

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

    Passaggio 2: fornire un attributo href base nella sezione head di index.html . Questo dovrebbe essere posizionato sopra a tutti i tag script e CSS. gli attributi href definiscono il percorso relativo del tuo progetto. codice di esempio: base href="/demo/" . La mia applicazione demo si trova nella directory principale del server Web Apache. Se la tua applicazione è una sottodirectory, usa: base href="/demo/sub-directory/" o base href="http://localhost/demo/sub-directory/"

    Passo 3: Se stai eseguendo questa applicazione AngularJS sul server Apache (Wamp, Mamp, ecc.): Da altri post StackOverflow, dovresti abilitare il modulo url-rewrite . A partire da Apache versione 2.2+, questo può essere ottenuto usando il comando: FallbackResource . Codice di esempio: crea un file .htaccess nella directory principale del server Apache. Aggiungere il comando seguente e riavviare il server. Fornire il percorso relativo index.html che gestisce l’errore 404 causato dalla funzionalità della rotta angular dovuta. Questo dovrebbe risolvere l’aggiornamento / l’accesso a deep-url e tutti gli errori 404.

     FallbackResource /demo/sub-directory/index.html 
    • Passo 1 : Iniettare $locationProvider nella funzione config() del modulo root angular e impostare html5Mode() su true, la syntax è modificata sulla versione angular 1.3 .

       $locationProvider.html5Mode({ enabled: true, requireBase: false }); 
    • Step2 : aggiungi sotto le impostazioni su web.config