I'm working on an Angular 2 app that is going to be integrated into a larger struts/jsp based application framework. In navigating out of the Angular 2 SPA and to another part of the app, I'll need to call an existing javascript function that is accessible in the window from the typescript code.
Does anyone know if this is possible and have a good example of how to do it? I looked into renderer.invokeElementMethod, but that appears to apply to elements inside of the SPA, and not able to target the outer dom (ie: window or document)
Related
I would like to know if there is a way to take the build files from an angular app and add it as part of another angular dist folder and launch that app inside a div in the parent app.
Basically the micro frontend architecture.
I have looking at options like using window object and customising the main.ts or the index.html, but none of them seem to help.
Does this other HTML page have angular included if so you can simply use the ng-include directive.
If not your best bet is iframe which is suboptimal
I am currently working on a larger web application that is based on MVC Razor Pages.
For future components we want to use VueJS.
Now i have the following problem:
Parts of my Page get loaded and rendered then the VueJs instance attaches itself to the root element.
After a few (or a few more) seconds further data is retrieved and additional HTML-Snippets are injected into the DOM. Now this new injected HTML-Snippets do contain tags for some of our vue components, but they get injected by MVC Razor.
The root VueJS instance seems not no notice this changes in the DOM. Therefore the vue component tags in the new HTML do not get used/hooked by VueJS.
While I do understand the basic problem, I wonder whether there is a good workaround.
We can not just update complete parts of our web app to VueJS - they are to big and to legacy. But if there is no workaround for VueJS to detect those external DOM changes It will become hard to migrate our web app...
Thanks for every response in advance,
mitras2
I have an existing angular / phonegap app that I'm trying to port to a windows metro app for win8. I've replaced my jQuery with a metro specific version and I've wrapped each angular module in the MSAp.execUnsafeLocalFunction method and I'm getting the application to sort of compile.
What is happening is that the page is built using angular ui router, so I'm able to see the dynamically created page, with angular ui router combining the 3 or 4 partials based on the route. However, when Angular starts to go through ng-bind, ng-repeat, etc... I'm getting the following error, "JavaScript runtime error: Unable to add dynamic content. A script attempted to inject dynamic content, or elements previously modified dynamically, the might be unsafe..."
I've looked to see how others have overcome this issue, but I have not found anything that works. I'm worried that what I'm doing is going to have force me to rewrite the application using the WinJS library.
Does anyone have any resources or experience that can help me with this?
What works for me is adding the ng-csp directive to the HTML tag. This disables some of the dynamic content stuff of Angular. I didn't even wrap anything in exeUnsafeLocaFunction. I'm not sure if it will work on Angular UI Router though...
More on the ng-csp directive here...
Can IBM Teamleaf be used on a single page application? Can it also be incorporated with require.js so that it is automatically included once and then picks up all javascript events that are fired?
I haven't used Tealeaf before, but our backend team does, and we're wondering if it is possible to combine it with a single page application that is mainly JS driven using require.js.
If so, should it be included on every single template page, just the main page, in our require.js file, or somewhere else?
The Tealeaf UIC creates a single global variable called TLT which you can easily shim. The API is designed to work with single page applications.
If the TLT object exists on the DOM where your application is loaded (however you got it loaded in there, like with require.js or some other method) you can then use any functionality from the library in your code. You'd probably want to do this where significant events on your front-end occur. Like if you had a React-Redux app with a componentWillUnmount firing at some significant UI action you wanted to track with Tealeaf, you could insert a TLT.flushAll() there to explicitly send a full snapshot to the collector at that instant. If HTML is being dynamically created and destroyed, fire TLT.rebind() after a create or destroy action to tell Tealeaf to re-observe the DOM to account for elements lost or created. I think the TLT API can be found here:
https://www.ibm.com/support/knowledgecenter/TLUIC/UICj2Guide/UIC/UICj2PublicAPIRef/UICaptureJ2PublicAPIReference.html
I’m looking for some guidance on structuring JS code in an .net MVC application.
I have JavaScript at the bottom of each page which is loaded, I want to apply a name-spacing / modular pattern to my JavaScript, removing it from inline code to separate JS files and load them on demand based on what page is being accessed.
When I google around, I tend to only find MVC patterns for javascript (this for example http://addyosmani.com/largescalejavascript/) which is great but I’m struggling to understand how I can implement this into an MVC application.
Any advice is welcome.
thanks
I use a technique that is similar to the one described here by Paul Irish. However rather than using hardcoded id's or classname's in order to know what scripts need loading and initialising I use the urls that are requested (full requests and ajax reqs)
For instance say I have a customer edit view that is served in response to a request to a url like myapp\customer\12\edit I would have a customer namespace in my js that had an inner edit namespace.
The customer namespace would have an init func likewise the edit. All customer pages when loaded would invoke the customer init event then any action level namespace if it exists. This would have an init func that would be auto called when the page was loaded (I have some magic that parses the url so that we know which js to initialise). So parsing the url would first invoke the customer init fund then the customer.edit init func. There is also common init functions that get fired everytime for app wide logic (to create a sidebar page widget for example).
I do not load the js on demand. I find it is better from a latency point of view to combine+minify all js files and serve them under gzip obviously.