if I host an angular app at some custom location e.g. http://localhost/collosys
then i have to change all the ng-include to have "/collosys/" for all the addresses, given that i am using absolute address for referring to any html file.
this is how i am doing that currently
<script>
var baseUrl = document.location.pathname;
document.write('<base href="' + document.location.pathname + '" />');
</script>
and then in rewrite ng-include tag
FROM: <div data-ng-include="'/Generic/csgrid/grid-buttons.html'"></div>
TO: <div data-ng-include=" baseUrl + 'Generic/csgrid/grid-buttons.html'"></div>
Can i modify the ng-include tag itself, so that it can prefix all the addresses with the hosting address
EDIT
I read somewhere that angularjs directives are extensible, any example on how to extend angularjs ngInclude directives?? any examples??
Yes you can, but I would write my own ng-include. If you try to upgrade angular, you will simply overwrite your changes.
Modify the
head
tag in your markup:You have several options as previously mentioned:
Change angular source code (also known as monkey patching) - not recommended, requires high maintenance and makes your code unreadable for other people.
Use a decorator, which allows you to get the ngInclude directive and change it. Decorators are often used to extend\change 3rd party libs, but the downside is that you'll have to replace the entire compile function of ngInclude, which is about 60 lines in exchange for a little prefix. Not to mention that if angular changes how ngInclude works, you'll be using a depracated or broken version of it.
Write your own wrapping directive, which will call ngInclude. from now on you'll have myInclude:
I solved this issue using $httpProvider.interceptors. The following prepends 'myAppDirectory' to ALL requests.
A regular ng-include, such as:
Will load myAppDirectory/user/info.html
You probably want to make some exceptions. In my case: