I have two different AngularJS applications hosted on different servers. I want to be able to have a link in one application to the other. How can I do this? Is it just as simple as adding an href to a url that loads the other module from the other server?
Note that these are two completely different modules with different dependencies and routes.
Update: by link, I mean have one SPA link to a different SPA
Related
Requirement
I'm am looking to host a website which contains multiple html5 games.
Similar to the Poki Games, or any other web game platform.
What I understand
I went through their (Poki Games) website and I found that multiple html5 game icons are listed on the website in a grid. And on clicking any one of the game icons, the website starts loading that particular game from an external source inside an iframe.
What I Need answer on
I want to know how they are serving multiple html5 games from another domain. Since each of the games are loaded in a iFrame I'm aware that they all have their own index.html
How to achieve the same, what approaches should I take? So that if I do
<iframe src="//another.domain.com/randomHtml5Game_1"> // will load randomHtml5Game1 game
<iframe src="//another.domain.com/randomHtml5Game_2"> // will load randomHtml5Game2 game
My skillset
I am primarily a frontend developer have experience with hosting in heroku. Also have some experience with firebase. I'll be using React along with phaser for development.
From my understanding of your question, the answer is very simple.
Just use code splitting and different render enpoints.
We would have our home page with various links to other pages (Image grid). When we click a image it changes the route.
www.domain.com/game1
www.domain.com/game2
www.domain.com/game3
You will need to code split the routes using various different ways. You could use webpack, or NextJS (Easier framework), or if your just using create-react-app, just use suspend and lazyload.
On a particular route it will load your html and javascript and run the game.
I am going to guess this isnt the answer your looking for but its a start ?
Let me know your thought ?
Daniel
Firebase supports hosting multiple sites/domains using a single Project.
You could sepparate each game into a folder and host each of them separately and with a different domain.
You can find more about it here.
I use this for example when deploying Web Apps. One domain is the app like app.appname.com then another domain www.appname.com is the landing page and if the project as an REST API I host that under api.appname.com. In my case I just use different prefixes but the whole domain and url can be different.
The benefit is that if you use other Firebase features you can shared them between all those projects. For example the authentication or databases.
I have recently worked in a pure Scala-Play application and later in a pure AngularJS application. I'm very impressed with both and I'm wondering what is the sweet spot of combining the two frameworks together. Since the two frameworks can be complementary but also overlapping in different areas e.g. MVC and page routing, as far as I know these are some of the possibilities:
Single Page design, use AngularJS MVC-only and use Scala-Play as "dull" service layer backend with no full page refreshes.
Allow page reloads and each page reload becomes a different AngularJS root application. This seems quite flexible e.g. the client side is not bloatted with so much data for larger applications but better partitioned for the different use-cases. The downside is that I'd need different AngularJS MVC applications and I'm not even sure how to organize it as a project. Are there examples of this?
Typical server side Web App, use Play MVC-only and AngularJS for handling UI models for each separate page.
My choice of IDE for these types of architecture would of course be WebStorm but unfortunately I can't have all client-side (AngularJS and JavaScripts) and sever-side (Scala-Play) codes in a single project.
I believe that there is no the ultimate optimal architecture for combining Play and Angular. It depends on the specificity of the project, team etc.
The decision to develop UI part with Angular and the server side back-end with Play is very reasonable. Technically it may be done as following:
Development:
Both parts are developed as detached projects with the preferable IDE.
The client should have some entry point HTML page. It is reasonable to name it index.html, but is may be any other name.
For client-server integration do on the Play side as following:
Select a sub-folder under the play application root, which will serve as the "home" for the client files. The default solution is to use the folder public, since all files under it are automatically deployed.
All client files should be copied under the public folder. The files may be organized in any structure.
Add a route for the default URL as a route to the index.html. The argument path in the route should be the full path of the index.html relatively to the application root.
If index.html is directly in the public folder, the route is like this:
GET /defaultUrl controllers.Assets.at(path="/public", file ="index.html")
Add routing to the client files:
GET /*file controllers.Assets.at(path="/public", file)
Now the distribution package will include all the client files.
Putting of the client files into the public folder should be done automatically, for example by organizing the client directory structure and appropriate configuration of the client IDE.
You can find more examples in this post.
I've developed two angular applications:
Contacts
MailClient
Both need to be deployed on their own endpoints. However: MailClient has a tab that needs to load Contacts and communication should be possible between the Contacts tab and the MailClient.
What is the best way to achieve this?
I first thought of using an iFrame and use angular.bootstrap to load a second angular application, but I've read that "AngularJS applications cannot be nested within each other."
So my second thought was to somehow convert the the Contacts-app to a module/component (bower?) which can be loaded in the MailClient. But how to achieve this? Or are there other (better) alternatives (like configuring the MailClient project to use symbolic links to the Contact project and just use them in the project - I don't now how we would configure the build-server in that case though)?
I understand how to create and use multiple pages(or apps) within a workspace and build them. I am kind of confused about how do you make these multiple apps talk to each other ?
lets say I have two apps in my workspace - App1 and App2.
I can use routing and make apps talk to each other if the value is simple enough(like a user id).
What If i have to send multiple id's or data from App1 to App2 ?
I think you have a few options available.
URL Parameters that you parse when instantiating the second application:
http://example.com/app2.html?one=1
Anchor in the location:
http://example.com/app2.html#one:1
If the applications are hosted on the same domain, you can use something like SessionStorage or LocalStorage (provided they are available to the client)
Set a cookie
You can add and remove cards panels dynamically in one page without providing 2 or more pages.The sencha app is designed for single page app.
How can i add multi web part sharepoint which used angularjs module?
I have web part in which i have used angular the problem is when i want to add this web part for several times in a page i don't know how to separate angular modules name? when there is only one web part added in the page it works properly but when there are more than one problem start
i guess i should create dynamic names for modules in server side am i right? is there any other way?
I used angular.bootstrap.
This resource helped me to figure out how to load different angularjs html+js files in 2 different content editor webparts. I also made sure to load angularjs only once on the page.