Have multiple AngularJS applications for the same site?

Question

I am developing a website that can be divided into several main pages. These pages can be considered isolated from each other, except that they use session data (i.e., session ID and login name).

At the beginning, I was going to build the site as a SPA using ng-view (i.e. turn pages into AngularJS views). But then I do not see any advantages for my site, which will be implemented in this way. And it will take extra time and effort to get it to support SEO ( Creating AJAX Crawlable Applications ).

Transitioning with an approach that offers no benefits and even creates additional workload does not seem to be too smart. So I thought to myself: why not make the main pages of my site separate AngularJS applications. The parts of the site that need to be indexed by search engines are just the initial screens of some of these applications, so I won’t need to do extra work for SEO. (Note: The initial screens are displayed by the Django server with data to be crawled by search engines, so they are not spaces.)

For each of the applications, it may or may not have its own set of partitions, depending on the requirements for it.

Example:

mydomain.com/item_page/1234 (load "item" app) mydomain.com/dashboard (load "dashboard" app) mydomain.com/account (load "account" app and default to "tab_1" view) mydomain.com/account#tab_1 (load "tab_1" view of "account" app) mydomain.com/account#tab_2 (load "tab_2" view of "account" app) mydomain.com/post_item (load "post" app) 

This is my only random thought, and I have not seen AngularJS examples that consist of several AngularJS applications. I'd like to know:

• Is it possible to use several corner applications for one site? What are some reservations I should be aware of? Is there any example of a wildlife site that uses this approach?
• If possible, how do I share session data between applications?

Please note that this post applies to multiple AngularJS applications for the same site, not multiple AngularJS applications on the same page.

Answer 1

There is nothing wrong with this approach if you keep the size of the loaded JS script small enough and provide good caching. One example of such applications might be GitHub (they don't use angular, but the approach is the same). When you submit the Issues page to GitHub, it loads the html page, the Github JS shared libraries, and the specific JS code. The navigation and actions within the page are handled by this single page script. If you go to another section (for example, code), a new page will be loaded with a new JS code specific to the page. Another example is the Amazon AWS console, they even use different structures for different pages. (both GitHub and Amazon do not use angular, but this approach works for any JS framework, even for GWT).

As for the exchange of some session data between pages, you can embed this information directly on the page itself, using built-in scripts or hidden elements. For instance. when your server creates the page, it should also generate some session information on the page. Another approach is to download session data once and save it in local storage / storage session.