When I do
/sites/all/themes/theme/js/controller.js
$scope.template = 'partials/tpl.html'
/sites/all/themes/theme/js/index.html
<div ng-include='template'></div>
/sites/all/themes/theme/js/partials/tpl.html
<b>Ho boy!</b>
I basically moved everything related to angular into js folder.
It returns localhost/partials/tpl.html while I need localhost/sites/all/themes/js/partials/tpl.html. How do I solve that without using an absolute path?
When I do
/sites/all/themes/theme/js/controller.js
$scope.template = 'partials/tpl.html'
/sites/all/themes/theme/js/index.html
<div ng-include='template'></div>
/sites/all/themes/theme/js/partials/tpl.html
<b>Ho boy!</b>
I basically moved everything related to angular into js folder.
It returns localhost/partials/tpl.html while I need localhost/sites/all/themes/js/partials/tpl.html. How do I solve that without using an absolute path?
- can you create a jsfiddle/plnkr? I have similar implementation working. – 0xc0de Commented Aug 23, 2013 at 6:55
- how can I include a file from an other folder in jsfiddle or plnkr – Jonathan de M. Commented Aug 23, 2013 at 7:31
2 Answers
Reset to default 4I solved this issue using $httpProvider.interceptors. The following prepends 'myAppDirectory' to ALL requests.
$httpProvider.interceptors.push(function($q) {
return {
'request': function(config) {
config.url = 'myAppDirectory/'+config.url;
return config;
},
};
});
A regular ng-include, such as:
<div ng-include="'user/info.html'">
Will load myAppDirectory/user/info.html
You probably want to make some exceptions. In my case:
$httpProvider.interceptors.push(function() {
return {
'request': function(config) {
// ignore api calls and ui-bootstrap templates.
if (config.url.indexOf('api')==-1 && config.url.indexOf('template')==-1) {
config.url = 'myAppDirectory/'+config.url;
}
return config;
},
};
});
Add a <base href="/sites/all/themes/theme/js/"> at the top of your <head> element inside index.html.
<html>
<head>
<base href="/sites/all/themes/theme/js/">
...
Reference
Relative links
Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.
Running Angular apps with the History API enabled from document root is strongly encouraged as it takes care of all relative link issues.