翻译Here is my .htaccess file:
RewriteEngine on RewriteCond %{REQUEST_FILENAME} -s [OR] RewriteCond %{REQUEST_FILENAME} -l [OR] RewriteCond %{REQUEST_FILENAME} -d RewriteRule ^.*$ - [NC,L] RewriteRule ^(.*) /index.html [NC,L]Here is 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); }]);Here is aboutID.html
ID: {{theID}}When I go to http://domain.com/about it works great, even if I do a cmd+r refresh it still loads the page fine.
If I click on a link from within the app and go to http://domain.com/paramtest/1234 it works fine.
The problem is if I try going directly to http://domain.com/paramtest/1234 or doing a hard refresh http://domain.com/paramtest/1234 angular routing no longer works and all of the variables are outputted like this {{var}}
I also have the <base href="/"> tag in place.
-- 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>Routing segment from 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); }]);Normal url's like http://domain.com/about/ work perfectly, but any parameter pages don't work on a hard refresh, it either returns 404 or index.html without any javascript included.