在路由中运行 .run 时，从 Angularjs 中的 url 中删除 #

IT技术 javascript php angularjs laravel angularjs-directive
2021-02-21 02:10:25

这是我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 漂亮，

所以我确实喜欢这样删除 # 如建议here

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 中没有 # 的示例？

6个回答

为什么要使用.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

更新：

你的 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>
但是我想在某些情况下同时使用 .run ，这不可能吗？
2021-04-18 02:10:25
UI Router 中有一些方法，例如.onEnter, resolve，.onExit您可以使用这些方法在进入 url 或退出 url 后执行操作。它让生活更轻松。
2021-04-21 02:10:25
如果我的代码对您正在使用的运行逻辑有帮助，也请告诉我。
2021-04-22 02:10:25
嘿，如果我这样做，我会得到空白页，但没有显示任何内容:(你能帮我吗？
2021-04-27 02:10:25
你无法删除#从您的网址，并按照您的.run()逻辑，如果"/wrongurl"它去"/"。这可以直接完成.otherwise("/")，我提供的代码将完成您给定的代码所做的所有工作。这不会与.html5Mode(true)&发生冲突<base href="/">。为什么要用.run()那个逻辑。如果你想在输入 url 时做一些其他的逻辑，那么为什么不使用$locationChangeStartevent & path([path])method(in $location) in .run()。https://docs.angularjs.org/api/ng/service/$location. 这些在ui.router我提到的过程中变得容易了。看看这个。
2021-05-06 02:10:25

尝试改变：

$locationProvider.html5Mode(true);

到： 

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

您无法注入$locationProvider，.run因为提供程序仅适用于.config

这个答案应该会有所帮助，但您会遇到两个问题：

  1. 您需要先检查一下，$locationProvider.html5Mode(true) 因为它不适用于 IE 10 或更早版本。

    if(window.history && window.history.pushState){
    $locationProvider.html5Mode(true);
}

  2. 这只能通过#在用户在 url 中输入时删除 来工作，即如果用户输入app/#/login它会更改为app/login。但是，如果用户添加书签或复制更改后的 urlapp/login并在浏览器中输入，他将收到错误消息，因为服务器不知道角度路由，因为它只是客户端。在我上面链接的线程中，您可能会找到一些关于如何解决此问题的评论。

是的，我在 index.html 文件中添加了相同的内容
2021-04-15 02:10:25
如果不看代码，很难找出问题所在。您是否将上述行放在 .config 中？您是否收到任何控制台错误？
2021-04-22 02:10:25
我不是在 Internet Explorer 中尝试，而是在 chrome 中尝试，但这种情况不起作用，我尝试将其放在 .run 的内部和外部 :(
2021-05-05 02:10:25
如果你有teamviewer，你能看看我的代码吗？
2021-05-06 02:10:25
您是否在此答案中添加了 <head> <base href="/"> </head> ？stackoverflow.com/a/32620370/3716153？
2021-05-12 02:10:25

您是否偶然收到 404 错误？每当您将模式更改为 html5history 时，您必须告诉 Web 服务器无论请求什么 URL，始终返回索引页。正如角度文档在这里所说：https : //docs.angularjs.org/guide/ $location

使用这种模式需要在服务器端重写 URL，基本上你必须重写所有指向应用程序入口点的链接（例如 index.html）。<base>在这种情况下，需要一个标签也很重要，因为它允许 Angular 区分作为应用程序基础的 url 部分和应用程序应该处理的路径。

您是否尝试过这样做并正确配置它？还请记住，您必须指定应用程序的基本条目 href 才能使其像

  <base href="/" />
你的意思是处理 .htaccess ？
2021-04-25 02:10:25
是的，我猜是这样 - 还没有在 Apache 服务器上工作，所以你必须自己检查如何做。
2021-04-30 02:10:25

问题是它缺少服务注入。所以在配置部分尝试注入 $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);
}])
不，# 在我尝试时没有删除:(
2021-05-02 02:10:25
其它你可能感兴趣的问题
上一篇类方法与类字段函数与类字段箭头函数有什么区别？ 下一篇如何在 Perl 网络爬虫中处理 Javascript？