Question

这是我的.htaccess文件：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

这是app.js

var app = angular.module('router', ['ngRoute']);

app.controller('main', function($scope, $location, $routeParams){
    $scope.test = 'testing';
    $scope.theID = $routeParams.theID;
});

// Routing Configuration
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/about', {
            templateUrl: 'views/about.html'
        })
        .when('/paramtest/:theID', {
            templateUrl: 'views/aboutID.html',
            controller: 'main'
        })
        .otherwise({
            templateUrl: 'views/home.html'
        });

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

这是关于ID.html

ID: {{theID}}

当我转到http://domain.com/about时，它效果很好，即使我执行了cmd + r刷新，它仍可以正常加载页面。

如果我点击应用内的链接并转到http://domain.com/paramtest/1234，则可以正常使用。

问题是，如果我尝试直接转到http://domain.com/paramtest/1234或执行硬刷新http://domain.com/paramtest/1234角度路由不再有效，并且所有变量都按此{{var}}输出

我也有<base href="/">标签。

- ADDITONAL FILES -

的index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contractors</title>

<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="styles/datepicker.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="styles/classic.date.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" type="text/css">
<link href="js/ng-sortable.min.css" rel="stylesheet" type="text/css">
<link href="js/jquery.fancybox.css" rel="stylesheet" type="text/css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>

<script type="text/javascript" src="js/angular-datepicker.js"></script>

<script type="text/javascript" src="app.js"></script>

<base href="/">

</head>

<body ng-app="bidder" ng-controller="main" flow-drag-enter="style={border: '5px solid green'}">
    <div class="header" ng-controller="main">
        <div class="logo">
            <a href="/"><img src="images/logo.png"></a>
        </div>
    </div>

    <!-- MAIN CONTENT -->
    <div ng-view ng-controller="main" class="view-animate" ng-if="firebaseUser"></div>

    <div class="profileSection" ng-if="firebaseUser" ng-controller="main">
        <div class="profileTopLeft">
            <img src="thumb.php?w=30&h=30&src=uploads/{{user.profilePicture || noPicture.png}}" ng-if="user.profilePicture" class="profilePicTop"> 
            <i class="fa fa-user" ng-if="!user.profilePicture"></i> 
            <b>{{user.Name}}</b> <small>{{user.Email}}</small>
        </div>
        <div class="profileTopRight">
            <a href="profile"><i class="fa fa-th-list"></i> My Profile</a>
            <a href ng-click="logoutUser()"><i class="fa fa-sign-out"></i> Logout</a>
        </div>
    </div>

    <!-- REGISTRATION -->
    <div ng-if="!firebaseUser" ng-controller="main">
        <loginregister></loginregister>
    </div>

    <div class="clear" style="height: 100px;"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/jquery.expander.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>

</body>
</html>

来自app.js的路由段

// PAGE SETUP
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
        .when('/about', {
            templateUrl: 'views/about.html'
        })
        .when('/findcontractor', {
            templateUrl: 'views/findcontractor.html'
        })
        .when('/editjob/:jobID', {
            templateUrl: 'views/editjob.html'
        })
        .when('/viewcandidates/:jobID/:validate', {
            templateUrl: 'views/viewcandidates.html'
        })
        .when('/messenger/:creatorID/:jobID/:candidateID', {
            templateUrl: 'views/messenger.html'
        })
        .when('/profile', {
            templateUrl: 'views/profile.html'
        })
        .when('/findwork', {
            templateUrl: 'views/findwork.html'
        })
        .otherwise({
            templateUrl: 'views/home.html'
        });

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

普通网址如http://domain.com/about/完美无缺，但是任何参数页面都不能进行硬刷新，它会返回404或index.html而不包含任何javascript。

Answer 1

如果有人遇到与此相似的问题，请确保将

放入

<base href="/">

位于index.html文件的顶部，直接位于标题下方。

这就是最终为我解决的问题。

Answer 2

确定。在index.html中，我看到有多个嵌套的html元素具有相同的控制器。如果您已将ng-controller="main"应用于<body>标记，则无需再将其添加到其嵌套元素（body标记的子元素）中。由于单个控制器的嵌套范围，可能会导致您遇到的问题。

只需将控制器单独添加到body标签，或添加包含该body包含的所有父div，然后将控制器分配给此父div。并从其他地方删除冗余控制器。

$ routeParams Hard Refresh在角度js

2 个答案: