首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在路由中有.run时,从Angularjs中的url中删除#

在路由中有.run时,从Angularjs中的url中删除#
EN

Stack Overflow用户
提问于 2015-11-30 19:27:40
回答 7查看 3.7K关注 0票数 20

这是我在AngularJS中的app.js路由文件

代码语言:javascript
复制
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

代码语言:javascript
复制
app.config(['$routeProvider', '$locationProvider'
    function ($routeProvider, $locationProvider) {

在最后一行

代码语言:javascript
复制
$locationProvider.html5Mode(true);

但是应用程序没有发生任何变化,它仍然在url中有#。

甚至我也试过this的方式

我如何才能做到这一点?

更新:

如果我这样做了

代码语言:javascript
复制
.run(function ($rootScope, $location, Data, $http, $locationProvider) {

在最后一行

代码语言:javascript
复制
$locationProvider.html5Mode(true);

我得到了这个错误

代码语言:javascript
复制
Error: $injector:unpr
Unknown Provider

我试过很多方法,但都不管用。

更新2 :

或者谁能建议一个angularjs示例的链接,它提供了url中没有#的示例?

EN

回答 7

Stack Overflow用户

发布于 2015-12-08 12:33:46

为什么要使用.run()?将<base href="/" />添加到您的<head>或body的开头(第一行),然后为了匹配您的.run()的逻辑,尝试这样( .otherwise("/path")到您的$routeProvider):

代码语言:javascript
复制
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

代码语言:javascript
复制
<!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.htmllogin.htmldashboard.htmllogout.html复制粘贴以下内容。Plunker将无法显示客户端的路由问题。尝尝这个。这完全是函数式代码。

代码语言:javascript
复制
<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>
票数 5
EN

Stack Overflow用户

发布于 2015-12-08 19:32:26

尝试更改:

代码语言:javascript
复制
$locationProvider.html5Mode(true);

至:

代码语言:javascript
复制
$locationProvider.html5Mode({
   enabled: true,
   requireBase: false
});
票数 3
EN

Stack Overflow用户

发布于 2015-12-05 15:26:29

您是否碰巧收到了404错误?无论何时将模式更改为html5history,您都必须告诉web服务器始终返回索引页,无论请求的是什么URL。正如angular文档所说:https://docs.angularjs.org/guide/$location

使用这种模式的

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

您是否尝试过这样做并对其进行了正确的配置?还要记住,您必须指定应用程序的基本条目href,它的工作方式如下所示

代码语言:javascript
复制
  <base href="/" />
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/33997547

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档