apache上带有html5mode（true）的angularjs ngroute失败

Posted 2023-03-05

技术标签:

【中文标题】apache上带有html5mode（true）的angularjs ngroute失败【英文标题】：angularjs ngroute with html5mode(true) on apache fails 【发布时间】：2015-10-18 01:52:06 【问题描述】：

我正在尝试将 ngroute 与 $locationProvider.html5Mode(true) 和 htaccess 重写一起使用，但我无法让它工作。

当我尝试访问例如 http://localhost/angular_blog/article/someTitle 时，我的控制台中出现以下错误：

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

我想我已经完成了我能找到的各种 tuts 所说的一切，但它应该可以工作，所以显然缺少一些东西。我已经在下面包含了我的代码，任何帮助或指针将不胜感激。

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

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

【问题讨论】：

资产在目录结构中的位置以及它们试图从当前加载的路径...在浏览器开发工具的网络选项卡中嗯。 chrome 来源说“localhost/angular_blog/article/assets” - 但它应该是 localhost/angular_blog/assets” 删除src 和href 和templateUrl 中的前导点，使它们成为绝对值。浏览器现在看到的是虚拟目录而不是角度路径中的哈希好的，我不得不将 /angular_blog/ 添加到我的路径中，现在它完美了！非常感谢您的指点：）您能回复一下，以便我接受吗？ 【参考方案1】：

一旦您不再在 url 中使用哈希并添加了基本标签，您还需要为 src、href 和 templateUrl 设置绝对的资产路径。

浏览器现在将角度路径视为目录路径，并且通过使用相对路径，它会在错误的位置查找。

【讨论】：

以上是关于apache上带有html5mode（true）的angularjs ngroute失败的主要内容，如果未能解决你的问题，请参考以下文章

AngularJS：打开 html5mode(true) 时，相对链接路径被破坏

AngularJS关于带有html5mode页面刷新错误的页面[重复]

apache_conf 使用ngRoute在子目录/ app中工作的Angular html5Mode apache

apache_conf .htaccess，＃AngularJS，UI-Router：配置Apache服务器以使用html5Mode

在页面刷新时使用 Angular JS ui.router html5Mode(true) 配置 Amazon S3 静态站点

Laravel 5 + AngularJS html5Mode