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.
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 know react is for Single Page Application. I have already build a complete application. I have a particular 3rd party integration that requires javascript and css files. I cannot add those external scripts as it breaks my entire application by overriding css and js.
I need to have a separate admin.html file which can have its own css and javascript tags. I do not want any conflict with my react app which renders on index.html
I tried to eject create-react-app and add a new admin.html.
https://github.com/facebook/create-react-app/issues/1084#issuecomment-568550609
But it uses only one page(index.html). This will not help me because I need completely a separate html file which I can import any javascript or css freely without any conflict on my index.html
Currently the possibility I thought was to create a separate react application just to render to this admin.html. So that there won't be any conflicts between javascript and css. But I want to know if there is an alternate way that I can achieve it in create-react-app. If so, simple example would be greatly appreciated.
PS: I need to redirect from one of components in my application to this new view admin.html with some data
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 have a web app developed in Laravel with blade.html views, I want to create a new feature which will be created in React Js and it will use some of html view files.
Now i have tried setting "innerhtml" and including html view files in react js but i can't access my php variables and methods.
how can i include html view files in React Js?
innerhtml will not work for React.
Take a look at dangerouslySetInnerHTML.
It can be used in this way:
<div dangerouslySetInnerHTML={{__html: 'First;<br/> Second....'}} />
Although, writing your views in react would be the better option if that is doable.
I am new to Vue.js, and I'm a little confused about how to use Vue.js in a non-spa project. In my case, I'm going to use JSF for my front-end, and I want to have some components just like button, filter and so on that can be used on different pages. Is there any tool that can convert .vue to pure .js so that I can include the .js in my jsf page? And the most important thing for me is, is there any tutorial or document about non-spa use that I can refer to?
The beginning of the Vue.js guide should explain this type of use. The .vue files are for convenience. You can still create Vue components in a regular .js file. For example (from the Vue.js guide):
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})