Question

我是AngularJS的新手。我目前在为我的观点撰写漂亮的网址时遇到了问题。我已将$locationProvider.html5Mode(true);设置为从地址栏中显示的网址中删除#。但是，在这样做时，我无法重新路由到所需的视图。我一直收到错误Cannot GET /login

首次启动应用时，我会收到主页/login，但是当我刷新页面时，我会收到同样的错误。

这里是应用程序的主页面（index.html）

<!doctype html>
<head>
<meta charset="utf-8">
<title>F-1 Feeder</title>
<meta name="viewport" content="width=device-width">
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<base href="/login"/>
<!-- endbuild -->
</head>
<body ng-app="F1FeederApp" class="col-md-8">

<ng-view></ng-view>

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbower -->
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<!-- endbuild -->

<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/loginHttpBackend.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers/driver.js"></script>
<script src="scripts/controllers/drivers.js"></script>
<script src="scripts/controllers/login.js"></script>
<!-- endbuild -->

我的app.js文件（发生重新路由的地方）看起来像这样

angular.module('F1FeederApp.controllers', []);

angular.module('F1FeederApp',
    [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ])
    .config([ '$routeProvider','$locationProvider',     function($routeProvider,$locationProvider,$location) {
            console.log('---------------inside config----------------');
        console.log($routeProvider);
        $routeProvider.when("/login", {
            templateUrl : "views/login.html",
            controller : "loginController"
        }).when("/drivers", {
            templateUrl : "views/drivers.html",
            controller : "driversController"
        }).when("/drivers/:id", {
            templateUrl : "views/driver.html",
            controller : "driverController"
        }).otherwise({
            redirectTo : "/login"
        });
        $locationProvider.html5Mode(true);

    } ]);

我还做了以下重要观察

如果我将index.html上的基本href设置为指向根<base href='/'>

并执行重新路由

$routeProvider.when("/", {
        templateUrl : "views/login.html",
        controller : "loginController"
    }).when("/drivers", {
        templateUrl : "views/drivers.html",
        controller : "driversController"
    }).when("/drivers/:id", {
        templateUrl : "views/driver.html",
        controller : "driverController"
    }).otherwise({
        redirectTo : "/"
    });

我的应用在这里工作正常。但我想＆＃39; / login＆＃39;成为我的默认页面。请指导我出错的地方或AngularJS本身的问题。

Answer 1

除了启用html5Mode之外，您还需要更新服务器端，将所有请求（如/login或/home等）重定向到单个入口点，例如{ {1}}。

服务器端

使用此模式需要在服务器端重写URL，基本上您必须重写所有指向应用程序入口点的链接（例如index.html）

在此文档页面上搜索“服务器端”：

angular $location docs

如果base href设置为“/”以外，AngularJS pretty-url无法处理页面刷新

1 个答案: