Как удалить хэш # с углового ng-маршрута

Я пытаюсь использовать locationProvider для удаления хэштега из маршрутов url в angular js, но он дает мне ошибку.

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

ошибка:

 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)

Я что-то пропустил?

EDIT: вызов функции html5Mode с объектами параметров, подобными этому

$locationProvider.html5Mode({
    enabled:true
})

я получаю следующую ошибку (изменен на angular полный, чтобы получить лучшее объяснение ошибки istead мини-версии)

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

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

ОТВЕТЫ

Ответ 1

вы можете использовать $locationProvider как это -

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

В качестве альтернативы вы можете использовать базовый тег в index.html(я полагаю, это ваша целевая страница)

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

Удаление базового тега может вызвать некоторые побочные эффекты в старом браузере IE, например IE9

Ответ 2

Шаги, чтобы избавиться от # из URL:

  • Inject $locationProvider в функции config() корневого модуля angular и установите для html5Mode() значение true

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

  • Включите тег base в разделе заголовка первой страницы загрузки приложения.

Ответ 3

Существует дополнительная запятая в массиве зависимостей, который у вас есть. Вы можете удалить запятую, а также включить базовый тег в свой раздел заголовка html, который у вас есть, и вы хорошо справитесь с удалением хэштегов

<base href="/">

Ваш массив зависимостей:

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

Ответ 4

  • Step1: Inject $locationProvider в config() функция angular root модуль и установите html5Mode() в значение true, синтаксис изменяется на angular 1.3 версия.

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

  • Шаг 2: добавьте настройки ниже на web.config настройки web.config

Ответ 5

Я знаю, что это год, но я до сих пор не нашел ни одного краткого и полного решения этого. Это все кусочки из нескольких ответов по всей сети, поэтому я собираюсь объяснить это здесь подробно, и, надеюсь, это может быть одно место, где другие посетители могут получить один полный ответ. * Я бы добавил к ответу, но это слишком долго для этого. Итак, начнем.

Сначала вам нужно загрузить либо ngRoute, либо angular -ui-router. Я выбираю последнее, потому что он уже содержит все, что он в ngRoute, и у него все еще есть больше возможностей. Так почему бы не?

  • Перейдите в CMD и введите этот

    npm install --save angular-ui-router

  • Теперь перейдите в файл app.js и напишите ваши маршруты, как этот

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

}]);

  • Для вашего следующего шага вам нужно перейти в <head> и добавить свой базовый каталог

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

  • Теперь вы не должны иметь hashtag больше НО, если вы перейдете на любую страницу, кроме /, и перезагрузите ее, вы получите сообщение об ошибке, т нагрузки. Вы должны сообщить своему серверу, как обращаться с вашим путем и базовым каталогом. Чтобы вылечить эту дилемму, вам нужен сервер, и я предпочитаю Express, но вы можете использовать других там. Я рекомендую Express, потому что в какой-то момент вам нужно будет взаимодействовать со стеками MEAN и угадать, что? Помимо Mongo, вы уже используете Angular и Node, так почему бы не добавить Express в микс?! Перейдите к своему CMD и сделайте следующее:

    $ npm install express --save

  • Теперь, когда у вас установлен сервер, вы должны создать файл server.js и поместить его в базу своего каталога и поместить в него следующее. * убедитесь, что пути к папкам соответствуют вашему каталогу, чтобы они были найдены.

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

  • Еще не сделано. Как только вы попытаетесь запустить сервер на порт 3006, вы получите сообщение об ошибке. Вернитесь к CMD и введите следующее:

    npm install ejs --save

  • Вы закончили, теперь вам просто нужно запустить сервер и оставить его открытым. Итак, с этого момента, все, что вам нужно сделать в CMD, вам понадобится второе окно CMD. (Обычно у меня на данный момент работает 4: 1-сервер, 2- Gulp для BrowserSync, 3-MongoDB, 4-для загрузки любых зависимостей, которые мне могут понадобиться на этом пути). Поэтому перейдите в CMD и сделайте это, чтобы запустить ваш сервер и свести его к минимуму.

    node server.js

  • Теперь вы можете перейти на localhost:3006 и перемещаться так, как если бы вы были на реальном сервере, который уже настроен для вас.

Ответ 6

Попробуйте эту строку:

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

перед этой строкой:

$routeProvider.

Ответ 7

Протестировано на Angular версии 1.6.1:

Для удаления хэштега (#) из URL требуется 3 шага.

Шаг 1: включить html5mode на locationProvider через Config. образец кода:

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

Шаг 2: укажите базовый атрибут href в разделе заголовка index.html. Это должно быть размещено поверх всех тегов script и CSS. атрибуты href определяют относительный путь вашего проекта. образец кода: base href="/demo/". Мое демо-приложение находится в корневом каталоге веб-сервера Apache. Если ваше приложение является подкаталогом, используйте: base href="/demo/sub-directory/" или base href="#" onclick="location.href='http://localhost/demo/sub-directory/'; return false;"

Шаг 3: Если вы используете это приложение AngularJS на сервере Apache (Wamp, Mamp и т.д.): из других сообщений StackOverflow следует включить модуль url-rewrite. Начиная с версии Apache версии 2.2+ это может быть достигнуто с помощью команды: FallbackResource. Пример кода: создайте файл .htaccess в корневом каталоге сервера Apache. Добавьте команду ниже и перезапустите сервер. Укажите относительный путь index.html, который обрабатывает ошибку 404, вызванную функцией angular -route. Это должно решить проблему обновления/доступа к глубокому URL-адресу и всем 404 ошибкам.

FallbackResource /demo/sub-directory/index.html