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
Related
I am using create-react-app to build a pwa. I noticed that in index.html page there is no link to any js files whatsoever, so I just assumed there is some way for the CRA to inject jsx inside the 'root' div of index.html. Now I want to add an offline page as a fallback when the user'ss internet is off. Now how do I inject react elements into that second html page. I have no idea how, It'd be appreciated if someone would help.
You may want to use service worker for this scenario. Here is the link for your reference: https://web.dev/offline-fallback-page/
I got a bootstrap theme that consists of HTML, CSS and Javascript. Now, I want to implement it (or let's say make it functional) in Vue. I have my index.html file that contains the container and it works. Now, my theme does have an index.html file as well. I just thought I can copy the whole file into the Vue-index.html and add the div with the id "app" around the area that changes the content. But it does not work. Basically, Vue does not load any external css or js files even though I reference them correctly (with relative reference using the dot: ./assets/css/style.css). It works inside a .vue-file (i.e. component) but not inside the index.html. What do I do wrong?
Yep, beginner here.
When you put them inside your index.html they are not compiled.
You can read about it HERE
Your index.html is something called a target. Vue uses this file as a mounting point for the rest of the application, so it's kept relatively clean, most likely with just metadata and a DOM mounting point. It works by loading the index.html in the browser and then mounting your Vue application on top of it.
If you're trying to apply some styles to a Vue application/components, your best bet is to modify *.vue files inside the app source of your Vue project (typically, /your-project/src). They will contain snippets of relevant sections/components alongside their logic (JavaScript) and styles (CSS/Sass), provided your project uses Single-File Components format.
For future reference:
It's hard to offer a solution without knowing the structure of your project, what type of components you are using, or even having code samples to get an idea of how things are working inside.
We'd need more information to be able to help you more accurately, so maybe you could create a lightweight demo on an interactive platform like codesandbox.io?
I am very new to Angular Js and I am having some difficulties with my web application.
So I have a .state to load a page for my website. I am trying to load a .js file that is written in REACT and I tried including the path for the .js file in the "templateUrl" component but it does not work. I only get the REACT code written in the browser. I also have a CSS file to be included as well.
Thanks !!
I think,
the best thing is this make a directive in react js and load that directive in angularjs templates.
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...
I have recently started using angularjs and understand the basics. I have a project separated into separate angularjs apps - for example an account app, a mail app, a news app, etc. Each of these apps are its own angular module.
Now if I were to add a notification app and I wanted that notification app to run on every page in tandem with my other app for that specific page how should I architect my modules to do so?
*My main concern is that angular only allows for one ng-view so I cannot create one for my main app for that page and another for the notifications.
While each app currently only supports one ng-view, you can manually bootstrap as many applications as you want (each with its own ng-view) to different elements in the page with something like this:
angular.bootstrap(document.getElementById('main_container'), ['my-app']);
We combine it with jQuery to be able to know when it's been bootstrapped, and to add in an ng-controller as well:
$(function () {
$('#main_container').attr('ng-controller', 'MainCtrl')
$.when(angular.bootstrap(document.getElementById('main_container'), ['my-app'])).done( function() {
$('body').show()
})
});
If you want to communicate between apps, then you need to do it with Angular's version of window: $window and events or a service as explained here: Share a single service between multiple angular.js apps
As Angular documentation says.
The directive designates the root of the application and is typically
placed at the root of the page....ngApp is the easiest way to
bootstrap an application.
An angular app defines it's module but it can have dependency on other modules too. So your example for notification is a module dependency not a app dependency.
You would create module for notification like
var notificationModule=angular.module('notification', []);
and register multiple sub elements like controllers, directives, filters, services etc.
You would then add this module as dependency into other modules such as
var customerModule=angular.module('customer', ['notification']);
You can register the notification dependency with any module not just the module linked to ng-app.
You html structure should be such that the main view is contained in ng-view and the ancillary view are included using ng-include directive. Since ng-include src property supports data binding you can swap the templates used with ng-include when the main ng-view content changes.