Удаление # из url в Angularjs при использовании .run в маршрутах

Вот мой файл маршрута app.js в AngularJS

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
                when('/login', {
                    title: 'Login',
                    templateUrl: 'resources/views/layouts/loginUser.php',
                    controller: 'authCtrl'
                })
                .when('/', {
                    title: 'Login',
                    templateUrl: 'resources/views/layout/login.php',
                    controller: 'logoutCtrl'
                })
                .when('/reset', {
                    title: 'Reset Password',
                    templateUrl: 'resources/views/layouts/forgetPassword.php',
                    controller: 'authCtrl'
                })
                .when('/invalidtoken', {
                    title: 'Login',
                    templateUrl: 'resources/views/layout/invalidtoken.php',
                    controller: 'authCtrl',
                    role: '0'
                })

                //$locationProvider.html5Mode(true);
    }])


        .run(function ($rootScope, $location, Data, $http) {
            $rootScope.$on("$routeChangeStart", function (event, next, current) {
                     var nextUrl = next.$$route.originalPath;

                    if (nextUrl == '/signin' || nextUrl == '/login' || nextUrl == '/verify' || nextUrl == '/register' || nextUrl == '/registered' || nextUrl == '/reset' || nextUrl == '/resetdone' || nextUrl == '/registersuccess')
                    {
                        $location.path(nextUrl);
                    }
                     else
                    {   

                        $location.path('/');
                    }      
            });
        });

Здесь я использую .run для обработки нескольких запросов.

Я хочу удалить # из URL-адреса, чтобы сделать URL-адрес довольно,

Итак, мне понравилось это, чтобы удалить #, как предлагалось здесь

app.config(['$routeProvider', '$locationProvider'
    function ($routeProvider, $locationProvider) {

и в последней строке

$locationProvider.html5Mode(true);

Но ничего не происходит с приложением, у него все еще есть # в URL-адресе.

Даже я попробовал этот способ

Как я могу это достичь?

Обновление:

Если я делаю

.run(function ($rootScope, $location, Data, $http, $locationProvider) {

и в последней строке

$locationProvider.html5Mode(true);

Я получаю эту ошибку

Error: $injector:unpr
Unknown Provider

Я пробовал по-разному, но никто из них не работает.

Обновление 2:

Или может кто-нибудь предложить ссылку примера angularjs, которая предоставляет пример без # в url?

Ответ 1

Почему вы хотите использовать .run()? Добавьте <base href="/" /> к вам <head> или начните свое тело (первая строка), а затем в соответствии с логикой вашего .run() попробуйте это (.otherwise("/path") на $routeProvider):

var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'toaster']);
app.config(['$routeProvider', '$locationProvider',
    function ($routeProvider, $locationProvider) {
        $routeProvider.
                when('/login', {
                    title: 'Login',
                    templateUrl: 'resources/views/layouts/loginUser.php',
                    controller: 'authCtrl'
                })
                .when('/', {
                    title: 'Login',
                    templateUrl: 'resources/views/layout/login.php',
                    controller: 'logoutCtrl'
                })
                .when('/reset', {
                    title: 'Reset Password',
                    templateUrl: 'resources/views/layouts/forgetPassword.php',
                    controller: 'authCtrl'
                })
                .when('/invalidtoken', {
                    title: 'Login',
                    templateUrl: 'resources/views/layout/invalidtoken.php',
                    controller: 'authCtrl',
                    role: '0'
                })
. otherwise("/");
           $locationProvider.html5Mode(true);
    }]);

Если вы все еще сталкиваетесь с проблемами, я рекомендую https://github.com/angular-ui/ui-router

Update:

ваш index.html

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Green Hopping</title>
        <link rel="shotcut icon" type="favicon.ico" href="public/images/favicon.ico" />
        <link rel="icon" type="favicon.ico" href="public/images/favicon.ico" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.4.2/angular-route.min.js"></script>

    </head>
    <body ng-cloak="">
      <base href="/">
        <div data-ng-view="" id="ng-view" class="slide-animation"></div>
    </body>

    <script>
      var app = angular.module('myApp', ['ngRoute']);
        app.config(['$routeProvider', '$locationProvider',
            function ($routeProvider, $locationProvider) {
                $routeProvider.
                        when('/', {
                            title: 'Home',
                            templateUrl: 'home.html',
                            controller: 'homeCtrl'
                        })
                        .when('/login', {
                            title: 'Login',
                            templateUrl: 'login.html',
                            controller: 'authCtrl'
                        })
                        .when('/logout', {
                            title: 'Logout',
                            templateUrl: 'logout.html',
                            controller: 'logoutCtrl'
                        })
                        .when('/dashboard', {
                            title: 'Dashboard',
                            templateUrl: 'dashboard.html',
                            controller: 'dashboardCtrl'
                        })          
                        .otherwise('/');              
                        $locationProvider.html5Mode(true);
            }])
        .run(function ($rootScope, $location, $http, loginSrv) {
            $rootScope.$on("$routeChangeStart", function (event, next, current) {
                    var nextUrl = next.$$route.originalPath;
                    var orUseUrl = $location.path();
                    console.log(nextUrl);
                    if (nextUrl === '/logout'){loginSrv.logout();}
                    if (nextUrl === '/login'){loginSrv.login();}
                    if (loginSrv.loggedin === false) { $location.path('/'); } 
                    else { $location.path(nextUrl); }
            });
        });
        app.service("loginSrv",function(){
          var ls= this;
          ls.loggedin = false;
          ls.logout = function(){
            ls.loggedin = false;
          }
          ls.login = function(){
            ls.loggedin = true;
          }
        });
        app.controller("homeCtrl",function($scope, loginSrv){
          $scope.loggedin = loginSrv.loggedin;
        })     
        app.controller("dashboardCtrl",function($scope, loginSrv){
          $scope.loggedin = loginSrv.loggedin;
        })                    
        app.controller("authCtrl",function($scope, loginSrv){
          $scope.loggedin = loginSrv.loggedin;
        })
        app.controller("logoutCtrl",function($scope, loginSrv){
          $scope.loggedin = loginSrv.loggedin;
        })        
    </script>

</html>

Все остальные шаблоны одинаковы. Скопируйте вставьте следующие значения для home.html, login.html, dashboard.html, logout.html. Plunker не сможет отображать проблемы с маршрутами для клиентской стороны. Попробуй это. Это полностью функциональный код.

<div>
    <div><a href="/">Home</a> | 
    <a href="/login">Login</a> | 
    <a href="/dashboard">Dashboard</a> | 
    <a href="/logout">Logout</a></div>

    <div> This is from the home/login/dashboard/logout Controller. Loggedin: {{loggedin}}</div>
</div>

Ответ 2

попробуйте изменить:

$locationProvider.html5Mode(true);

To:

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

Ответ 3

Вы случайно получаете ошибку 404? Всякий раз, когда вы меняете режим на html5history, вы должны сообщать веб-серверу, что он всегда возвращает индексную страницу независимо от того, какой URL-адрес запрашивается. Как говорится в документах angular: https://docs.angularjs.org/guide/ $location

Использование этого режима требует перезаписи URL-адресов на стороне сервера, в основном вы должны переписать все свои ссылки на точку входа вашего приложения (например, index.html). Требование тега <base> также важно для этого случая, так как позволяет angular различать часть URL-адреса, которая является базой приложения, и путь, который должен обрабатывать приложение.

Вы пытались это сделать и правильно настроили? Также помните, что вам нужно указать базовую запись href вашего приложения, чтобы она работала как

  <base href="/" />

Ответ 4

Вы не можете вводить $locationProvider в .run, потому что поставщики доступны только для .config

Этот ответ должен помочь, но у вас будет 2 проблемы:

Вам понадобится проверка перед $locationProvider.html5Mode(true), поскольку она не будет работать с IE 10 или старше.
```
if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
} 
```
Это будет работать только при удалении #, когда пользователь вводит его в URL-адрес, т.е. если пользователь наберет app/#/login, он изменится на app/login. Однако, если пользователь закладок или копирует измененный url app/login и входит в него в браузере, он получит сообщение об ошибке, поскольку сервер не знает о маршрутизации angular, так как это только клиентская сторона. В потоке, который я связал выше, вы можете найти некоторые комментарии о том, как исправить это.

Ответ 5

Проблема заключается в том, что отсутствует служебная инъекция. Поэтому в разделе конфигурации попробуйте ввести $locationProvider, как показано ниже.

app.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
    $routeProvider.
            when('/login', {
                title: 'Login',
                templateUrl: 'resources/views/layouts/loginUser.php',
                controller: 'authCtrl'
            })
            .when('/', {
                title: 'Login',
                templateUrl: 'resources/views/layout/login.php',
                controller: 'logoutCtrl'
            })
            .when('/reset', {
                title: 'Reset Password',
                templateUrl: 'resources/views/layouts/forgetPassword.php',
                controller: 'authCtrl'
            })
            .when('/invalidtoken', {
                title: 'Login',
                templateUrl: 'resources/views/layout/invalidtoken.php',
                controller: 'authCtrl',
                role: '0'
            })

            $locationProvider.html5Mode(true);
}])

Ответ 6

С html5mode вы должны указать базовый url в своем html файле, например,

<base href="/">

Некоторые ссылки, которые вы можете использовать для справки,

https://docs.angularjs.org/error/ $location/nobase

https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag

Ответ 7

не представляется возможным удалить вручную хеш-ханг (#) из href вручную, и это приводит к сбою в работе вашего маршрутизатора, потому что хеш-бэнды позволяют браузеру не обрабатывать ваше состояние, чтобы отправить запрос на получение конечной точки. браузер не запускает запрос на получение над #/маршрутом, пока он выполняет over/route, если вы не используете провайдера url в режиме html5. Для режима html5 добавьте строку ниже в вашу функцию app.config:

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