Como remover o hash # do angularjs ng-route

Estou tentando usar o locationProvider para remover a hashtag das rotas de url em js angulares, mas isso me dá um erro.

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

o erro:

  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) 

Estou esquecendo de algo?

EDIT: chamando a function html5Mode com object de opções como este

 $locationProvider.html5Mode({ enabled:true }) 

Eu recebo o seguinte erro (alterado para angular completo para obter uma melhor explicação do erro é da versão minificada)

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

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

você pode usar o $ locationProvider como este –

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

Como alternativa, você pode usar a tag base em seu index.html (suponho que essa seja sua página de destino)

    

Removendo tag base pode causar alguns efeitos colaterais no navegador IE antigo como o IE9

Passos para se livrar de # do URL:

  1. Injetar $ locationProvider na function config () do módulo de raiz angular e definir html5Mode () como true

     angular.module( 'app', [ ] ).config(function( $locationProvider) { $locationProvider.html5Mode(true); }); 
  2. Incluir tag base na seção head da primeira página de carregamento do aplicativo.

Há uma vírgula extra na matriz de dependencies que você possui. Você pode remover a vírgula, bem como include tag base na sua seção de cabeça do html que você tem e você é bom com a remoção de hashtags

  

Seu array de dependencies:

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

Eu sei que este é um ano, mas ainda hoje não encontrei uma solução concisa e completa para isso. São todos os fragments de várias respostas em toda a rede, então vou explicá-lo aqui em detalhes e espero que possa ser o único lugar onde outros visitantes possam obter uma resposta completa. * Eu adicionaria a resposta, mas isso é muito longo para fazer isso. Então vamos começar.

Primeiro você precisa baixar o ngRoute ou o angular-ui-roteador. Eu escolho o último porque ele já contém tudo o que está no ngRoute e ainda tem mais resources. Então por que não?

  1. Vá para o seu CMD e digite este

     npm install --save angular-ui-router 
  2. Agora vá para o seu arquivo app.js e escreva suas rotas como esta

     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. Para o próximo passo, você precisa ir para o seu e adicionar seu diretório base

       
  4. Por enquanto, você não deve mais ter a hashtag, MAS , se você for para qualquer página diferente de / e recarregá-la, você receberá um erro e a página não carregará. Você precisa dizer ao seu servidor como tratar seu caminho e diretório base. Então, para curar esse dilema, você precisa de um servidor e eu prefiro o Express, mas você pode usar outros por aí. Eu recomendo Express porque em algum momento você precisará se envolver com pilhas MEAN e adivinhe? Além do Mongo, você já está usando Angular e Node, então por que não adicionar o Express ao mix ?! Vá para o seu CMD novamente e faça o seguinte:

     $ npm install express --save 
  5. Agora que você tem um servidor instalado, você deve criar um arquivo server.js e colocá-lo na base do seu diretório e colocar o seguinte nele. * garanta que seus caminhos de pastas correspondam ao seu diretório para que eles sejam encontrados.

     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. Ainda não feito. Assim que você tentar executar o servidor na porta 3006, você receberá um erro. De volta ao CMD e digite:

     npm install ejs --save 
  7. Você está pronto, agora você só precisa executar o seu servidor e deixá-lo aberto. Então, a partir deste ponto, qualquer coisa que você precisa fazer no CMD, você precisará de uma segunda janela CMD. (Eu normalmente tenho 4 em execução no momento. 1-servidor, 2-Gulp para BrowserSync, 3-MongoDB, 4-Para baixar todas as dependencies que eu possa precisar ao longo do caminho). Então, vá para o seu CMD e faça isso para executar o seu servidor e minimizá-lo fora do caminho

     node server.js 
  8. Agora, você está livre para ir ao localhost:3006 e navegar como se estivesse em um servidor ao vivo que já está configurado para você.

Tente esta linha:

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

antes desta linha:

$routeProvider.

Testado na versão Angular 1.6.1:

Requer 3 etapas para remover a hashtag (#) do URL.

Etapa 1: ative o html5mode no locationProvider por meio do Config. Código de amostra:

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

Etapa 2: forneça um atributo base href na seção head do index.html . Isso deve ser colocado em cima de todas as tags de script e CSS. os atributos href definem o caminho relativo do seu projeto. código de exemplo: base href="/demo/" . Meu aplicativo de demonstração fica no diretório raiz do servidor web Apache. Se o seu aplicativo for um subdiretório, use: base href="/demo/sub-directory/" ou base href="http://localhost/demo/sub-directory/"

Etapa 3: Se você estiver executando este aplicativo AngularJS no servidor Apache (Wamp, Mamp, etc): de outras postagens do StackOverflow, você deve ativar o módulo de url-rewrite . A partir do Apache versão 2.2+, isso pode ser feito usando o comando: FallbackResource . Exemplo de código: crie um arquivo .htaccess no diretório raiz do servidor Apache. Adicione o comando abaixo e reinicie o servidor. Forneça o caminho relativo index.html que manipula o erro 404 causado pela funcionalidade de rota angular. Isso deve resolver atualizar / acessar os URLs de profundidade e todos os erros 404.

 FallbackResource /demo/sub-directory/index.html 
  • Passo 1 : Injetar $locationProvider na function config() do módulo de raiz angular e definir html5Mode() para true, a syntax é uma mudança na versão angular 1.3 .

     $locationProvider.html5Mode({ enabled: true, requireBase: false }); 
  • Passo 2 : adicione abaixo as configurações no web.config