在Apache上使用html5mode（true）的Angularjs ngroute失败 [英] angularjs ngroute with html5mode(true) on apache fails
问题描述
我正在尝试将ngroute与$ locationProvider.html5Mode（true）和htaccess重写一起使用，但无法正常工作。
I am trying to use ngroute with $locationProvider.html5Mode(true) and a htaccess rewrite, but I can't get it to work.
访问例如 http：// localhost / angular_blog / article / someTitle 我的控制台出现以下错误：
When I try to access for example http://localhost/angular_blog/article/someTitle I get the following error in my console:
blogApp.js:1 Uncaught SyntaxError: Unexpected token <
blogCtrl.js:1 Uncaught SyntaxError: Unexpected token <
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=blogApp&p1=Error%3…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%3A17%3A381)(anonymous function) @ angular.js:38(anonymous function) @ angular.js:4138r @ angular.js:323g @ angular.js:4099ab @ angular.js:4025d @ angular.js:1452uc @ angular.js:1473Jd @ angular.js:1367(anonymous function) @ angular.js:26304a @ angular.js:2762c @ angular.js:3032
我想我已经完成了我能够找到的各种tut的所有操作，但是随后它应该工作了，因此显然缺少了一些东西。
我在下面包含了我的代码，所有帮助或指针都将不胜感激。
I think I've done everything various tuts I've been able to find said, but then it should work, so obviously something is missing. I've included my code below, any help or pointers will be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="blogApp">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script>
<script type="text/javascript" src="./assets/js/blogApp.js"></script>
<script type="text/javascript" src="./assets/js/blogCtrl.js"></script>
<base href="/angular_blog/">
</head>
<body>
<main data-ng-view></main>
</body>
</html>
JS-blogApp.js
JS - blogApp.js
var blogApp = angular.module('blogApp', [
'ngRoute',
'ngSanitize',
'blogCtrl'
]);
blogApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/page', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/page/:pagePermaLink', {
templateUrl: './assets/templates/page.html',
controller: 'pageCtrl'
}).
when('/article', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
when('/article/:articlePermaLink', {
templateUrl: './assets/templates/article.html',
controller: 'articleCtrl'
}).
otherwise({
redirectTo: '/page',
});
$locationProvider.html5Mode(true);
}]);
HTACCESS
# BEGIN Pretty URL
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
# END Pretty URL
推荐答案
一旦您不再使用网址中的哈希并添加了基本标记，您还需要使 src 的资产路径成为绝对路径， href 和 templateUrl 。
Once you moved away from using a hash in the url's and added a base tag you also need to make your asset paths absolute for src , href and templateUrl's.
浏览器现在将角度路线视为目录路径，并通过使用相对路径在错误的位置进行查找。
The browser now sees the angular routes as directory paths and by using relative paths it is looking in the wrong places.
这篇关于在Apache上使用html5mode（true）的Angularjs ngroute失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
