{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Emotional °昔 的问题《angularjs ngroute with html5mode(true) on apache f》','https://www.manongdao.com/q-1112049.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I am trying to use ngroute with $locationProvider.html5Mode(true) and a htaccess rewrite, but I can't get it to work.
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:3032I 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
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
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,hrefandtemplateUrl's.The browser now sees the angular routes as directory paths and by using relative paths it is looking in the wrong places.