0

Я пытаюсь использовать ngroute с $ locationProvider.html5Mode (true) и переписать htaccess, но я не могу заставить его работать.angularjs ngroute с html5mode (true) на apache не удается

Когда я пытаюсь получить доступ к примеру 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> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Test</title> 
 

 
\t <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
\t <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script> 
 
\t <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-sanitize.min.js"></script> 
 
\t <script type="text/javascript" src="./assets/js/blogApp.js"></script> 
 
\t <script type="text/javascript" src="./assets/js/blogCtrl.js"></script> 
 

 
\t <base href="/angular_blog/"> 
 

 
</head> 
 
<body> 
 
\t <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> 
 
\t RewriteEngine on 
 
\t 
 
    # 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

+0

где находятся активы в структуре каталогов и какой путь они пытаются загрузить из текущего ... на вкладке в сети браузера dev tools – charlietfl

+0

Хммм. хром-источники говорят, что «localhost/angular_blog/article/assets» - но это должен быть localhost/angular_blog/assets » –

+1

удалить ведущую точку в этих' src' и 'href' и templateUrl's, чтобы сделать их абсолютными. Браузер теперь видит виртуальные каталоги вместо хеша в угловых дорожках – charlietfl

ответ

1

После того, как вы отошли от использования хэша в URL, и добавили базовый тег вы также должны сделать ваши пути активов абсолютно для src, href и templateUrl лет.

Теперь браузер видит угловые маршруты как пути к каталогам и используя относительные пути, он ищет не в тех местах.

Смежные вопросы