angularjs 在 apache 上使用 html5mode(true) 的 ngroute 失败

Question

我正在尝试将 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

Answer 1

一旦您不再使用 url 中的散列并添加了基本标签，您还需要为 src 、 href 和 templateUrl的。

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

angularjs 在 apache 上使用 html5mode(true) 的 ngroute 失败

angularjs ngroute with html5mode(true) on apache fails

.htaccess

friendly-url

pretty-urls

angularjs

angularjs-ng-route