I am trying to run, N time the same Angular module independently into a "parent" Angular App.
Using ui-route and ui-route-extra, i can display N time the child app, but they do not run independently : they shared services as singletons (I need a unique service instance for each child module instance), and changing state (via state.go or ui-sref) into a particular instance, change the state into all the others.
I cant find any way to run these child modules as independant app into a container app...
EDIT :
I will give you some background to avoid XY problem.
To make it simple, i build a chat system. I have built a standalone chat Angular App, anyone can integrate into its website (as a widget).
Now, i am trying to make an admin interface displaying all opened chat room. To avoid code duplication, i want to reuse the widget app into admin interface.
The problem is to separate behavior for each room. I need multiples services instances, and state change should be applyed into specific room.
Related
Hi I have 16 logic app which load file from share point but I need to run all those separately.
Is there any way can I run all those 16 logic app from one master logic app.
Yes you could, the logic app support create the "child" Logic App. Then you could call nested Logic Apps directly from Logic Appps Designer.
If you want to run them in parallel, you could choose Add a parallel branch then call child Logic Apps.
Firstly ,your child Logic Apps need to be set with Manual – When an HTTP request is received trigger. Then go to the parent logic app add an action and search Logic App, then choose the Logic Apps you want.
About the details you could refer to this doc:Azure Logic Apps: Call nested Logic Apps directly from Logic Apps Designer.
Hope this could help you, if you still have other questions,please let me know.
I've angular app with lots of states and modules etc. Now, I want to send a link to the user. When user'll hit this url, I want to redirect him to a new tab rendering only that particular state (specified in URL) i-e I don't want anything else to be visible to the user. Or you can say, I want to open a popup window rendering that particular state's html in popup window . This is the approach that comes to my mind to sort it out.
Ps. There are Rest APIs at the backend which I am calling through angular resource service to bind data with the model of the views
Option
I've rest APIs on backend, So, I was thinking to developing s separate Nodejs application, And I will send nodejs application url to the user and in the default/home route I'll call backend API and, the returned resultset will be rendered in html file within nodeJs application and this way, I'll render the corresponding data to user's browser window.
This is the flow for that
I don't know if that is right or clever approach. Please suggest me what will be the best approach to sort it out.
Thanks in advance.
This is what my app looks like
Everything in the left side-nav is a module and clicking on this I am routing to a different state. I am using angular-material and lots of other dependencies in this project.
And this is what I want.
I'll refer a link to the user for example www.myapp.com/specificpage.html. And hitting this url, a new tab/popup will be opened rendering state defined in the same app but with some non-editable url. And it should like.
There are multiple ways to achieve this and each approach has advantage and disadvantage. You have to choose depending on requirement and architecture. Details are below-
Create a separate app - You can do it through separate code base or use the module based build process and include this module only for new app.
Divide application is two part, public pages and private pages - Include this page and required APIs for this page in the public modules for your app.
Send token in the link - If you want to make secure page, send short lived token in the eMail and validate token on the server before displaying page to the user.
So lets say you have a React-based mobile web app, that takes advantage of server-side rendering for the initial view ( for speed + SEO reasons ). There is no "index.html" file - the index file is dynamically built server-side and returned in the initial response.
Now lets say you want to add PWA functionality to that app. You hook up a service worker to cache assets, etc.
One of the core tenants of PWA's is that they provide an offline experience. Say we just want to show a refresh page, "You're offline, click here to refresh", when the service worker detects the user is offline.
Online examples provided by google talk about using an App Shell -- a static HTML file, which can be cached by the service worker on initial visit, and which will be the "shell" your react app lives inside. This shell ties in to showing an "offline" view.
How does this work with server-side rendering, where there is no "shell" html file, and each route can potentially return a different index.html file?
Any demos or examples of this functionality in the wild?
Any demos or examples of this functionality in the wild?
Yes!
Take a look at https://github.com/GoogleChrome/sw-precache/tree/master/app-shell-demo, which uses the dynamicUrlToDepndencies option in sw-precache to define which underlying resources are used to server-render the App Shell HTML.
The service worker it generates will take care of updating the App Shell HTML whenever any of the resources it depends on changes.
In this model the service worker will return the same App Shell HTML document for all navigation requests, so it assumes that the App Shell HTML is generic enough to then be populated at runtime with the dynamic content that's associated with the actual URL via your standard client-side routing logic.
My website is built with Angular2. Imagine it as a big dashboard with a lot of modules. Sometimes information from multiple modules are required at the same time - therefore I want to allow my users to open a module in a new window. A real-world example for this is the video container of Hangout.
From my research there would be 2 ways to do this:
I open the route of the selected Ng-Component in a new window. As a result angular would reinit all services. To keep my data consistent I would need find a way to sync the instances. Maybe some kind of service that writes all attributes to localStorage?
This is somehow the way GoldenLayout implemented the Popouts.
I could init my component in window A and hide it - Now open a new window (B) and pass a copy (Css, HTML, Data) of my component to it. This would mean that I only need to sync the mirrored component, but I am not sure if this is good architecture.
Which way would you go to solve the described problem and are there more elegant solutions?
I have a bundle of older ExtJs components that drive the UI, store management, and application logic in something that prior to the world of MVC I'd have called an application. I'm in the process of rewriting it, and wanted to take advantage of ExtJS MVC if possible.
The one thing that makes this unique from the tons of guides I'd otherwise be working from is that my Ext app doesn't own the whole page - instead of a full page viewport onready I have a modal Ext.window.Window that runs on an event from other non-ext javascript on the page.
I'd like to migrate this into a coherent ext application if possible, but as they seem to only properly launch when ext is ready I'm questioning if this is the right tool for the job.
My leading idea right now is to initialize the application on page load, but not actually render any views - exposing a static method on the app the external js can call to render and start my app's lifecycle on demand. Is this a good idea? Is there a better option I'm missing?
Yes, it is a very good idea. I have written an example of simple login system where the application is not actually started before the user logs-in.
It is very similar to your way in that that there is a method you call to actually start the app.