Different base url for page routing and templates/partials/RESTful API

Question

My Angular app is splitted into several subapps. I'm working with laravel which is also responsible for the routing between the subapps.

So there are the following urls handled by laravel:

ModuleX: /moduleX
ModuleY: /moduleY
ModuleZ, Item n: /moduleZ/item-n (unlimited amount of items)

And finally on top of these there are my 3 Angular subapps. So for example:
/moduleZ/item-1/#/hello/world

Additionally the templates, partials and a RESTful API are served by laravel under the following urls:

/templates
/partials
/api

If I set the base url with the html tag <base href="http://www.example.com/app/"> I can use relative urls for templates, partials and the api but not for the routing. I'll allways have to add the module url part like that moduleX/#/hello/world.

If I set the base url like for example <base href="http://www.example.com/app/moduleX/"> I can write all links like #/hello/world but the templates, partials and api requests aren't working anymore.

The whole app also sits in a subfolder so I can't just use for example /templates.

So basically my problem or the question now is, what's the best way for handling the different base urls? I don't really like it to prepend the module name to every link.

Answer 1

Look it's might be a particular solution, but may be you should use filters for urls? For example:

.filter('routeFilter', [function () {
        return function (route) {

            if (some condition mean this direct html link){
                return 'MODULE-X/' + route;
            }else{
               return route  
            }

        };
    }])