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

Question

My Angular application is divided into several subpaps. I work with laravel, who is also responsible for routing between subapps.

So there are the following urls handled by laravel:

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

And finally, on top of them there are my 3 Angular subapps. For example:
/moduleZ/item-1/#/hello/world

In addition, laravel's templates, partial files, and RESTful APIs are served by the following URLs:

/templates
/partials
/api

If I set the base url with the html <base href="http://www.example.com/app/"> , I can use relative URLs for templates, partitions and api, but not for routing. I still have to add part of the module url like moduleX/#/hello/world .

If I set the base url, for example, <base href="http://www.example.com/app/moduleX/"> , I can write all the links, such as #/hello/world , but templates, partial and queries api no longer work.

The entire application is also located in a subfolder, so I can’t just use, for example, /templates .

So basically my problem or question now is, what is the best way to handle various base URLs? I don't really like adding a module name to every link.

Answer 1

Look, maybe this is a specific solution, but maybe you should use filters for URLs? For instance:

 .filter('routeFilter', [function () { return function (route) { if (some condition mean this direct html link){ return 'MODULE-X/' + route; }else{ return route } }; }]) 

Answer 2

I would suggest that you let (sub) applications know their real base, not the parent, but you make the server responsible for climbing the path hierarchy to find more general resources of a general level for the absence of local ones. It also makes it easy to prototype new sub-applications, first check for changes to common parts, etc.

In a web server such as Apache, it will look like a rewrite rule (conditionally not find a file), it just replaces the same file in the parent hierarchy.

In laravel (according to the docs of the router), it looks like you can add optional “directories” to your current rules, that is:

 Route::get('/.../app/templates/{name}', function($name) ... 

becomes:

 Route::get('/.../app/{module?}/{item?}/templates/{name}', function($name, $module, $item) ... 

Then you can use $ module and $ item if you need to test resource change using a specific sub-application / elements.

The disadvantage of creating a server responsible for inheritance processing is an independent client fetch / cache of identical resources with different paths. But you can at least choose between high file inefficiency or access delay, using either rewriting or redirecting. You can also always hardcode significant paths in production clients later and still benefit from having a hierarchy for testing and graceful handling of random errors on client links.

Answer 3

You can make it easier if you use a combination of service and directive.

You can implement a directive similar to ngHref, which, when given a link, converts it and adds the link back. It will be provided with a service that will give it a base url or relative URL or something special.

This service, which is entered in the directive, will be configured using serviceProvider in the app.config block of each auxiliary application. Since the angular injector has only one instance of each service, I think you will need several injectors or one injector for each application. Its unclear whether they use an injector among them in your application.

You can configure each service in accordance with the module to return different base paths. Each time, each time a directive will be added for each link.

With this you can use <base href="http://www.example.com/app/"> and this should solve your problem.

I have not written any code, but I can help if you need it.