AngularJS: dealing with root and sub applications in sub folders

Question

I have two AngularJS applications:

1. is the base application and runs at root /
2. is a sub application that needs to be isolated for design reasons and runs in a sub folder, say /foo/

How can I route requests from the root application to the sub application?

The biggest problem I've had is that the URL routing picks up this sub application route and since this route is not defined in the root application it is handled by the otherwise I can't send the user to the sub application.

Answer 1

So after some debugging the solution wasn't too painful:

1. make sure that your rewrite rules that usually rewrite all non-asset URLs to your index file also stop rewriting any requests to the sub application.
2. make sure that all asset requests (such as linking to the CSS and JS from your index file) are prefixed with the sub application directory name.
3. make sure that all your routes in the sub application are not prefixed with the sub application directory name.

And then it works!

Answer 2

If you are expecting a full page reload Html Link Rewriting may help you. See the location service documentation here . From documentation

In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.

Links that contain target element
Example: <a href="/ext/link?a=b" target="_self">link</a>
Absolute links that go to a different domain
Example: <a href="http://angularjs.org/">link</a>
Links starting with '/' that lead to a different base path when base is defined
Example: <a href="/not-my-base/link">link</a>