Question

我正在尝试使用$ locationProvider.html5Mode（true）和htaccess重写的ngroute，但我无法让它工作。

当我尝试访问例如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

我想我已经完成了我能找到的各种各样的事情，但是它应该有用，所以显然缺少了一些东西。我已经在下面提供了我的代码，我们将非常感谢任何帮助或指示。

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

Answer 1

一旦您停止在网址中使用哈希并添加了基本代码，您还需要为src，href和templateUrl设置绝对资产路径＆＃39; S

浏览器现在将角度路径视为目录路径，并使用相对路径查看错误的位置。

在apache上使用html5mode（true）的angularjs ngroute失败

1 个答案: