Is it possible to embed React app into AngularJS 1.x? - reactjs

I am building a small React app with the team which uses AngularJS 1.x version.
My approach was to embed build folder in one of the AngularJS templates where I expected to see a static generated website <ng-view id="ng-view-content"></ng-view> container.
I don't need to share states or components between, I am just looking for a solution for embedding React generated sites into Angular view.
Thanks in advance

Related

Best Approach of Using React Component in Angular 8+?

I Have an angular Application build on 8+ now I have a requirement where I want to create react component and embed it in Angular Application.
How my Angular folder structure will be modified, is there any possible design pattern I have to follow while working both angular and react in one application?
I am not a guru of the frontend, as I know it is possible.
Interact through Web Component spec
Apply Microfrontend patterns to mix Angular/React in the sample application
Ionic team created a project named stencil which targets WebComponent development and conceptly it mixes the Angular and React good part in the same framework.

Include built ReactJS 16.x app into AngularJS 1.x

For a project I am working on, there is a situation where I have to include and ReactJS app which is already compiled into an AngluarJS project. Chrome/Firefox Browser is the Enduser-Interface.
I know that this setup isn't the best, unfortunately I have to deal with both frameworks in this exact setup.
I am not allowed to use an IFrame neither.
I googled a lot, searching for wrapper, which exists but only if the react project isn't already built.
Does anyone have a solution for this?
I am not sure your requirement, as per my understanding, you can import the "ngmodule" to react component and render the angular script. In this case you can achieve it from server side rendering.
In our project, we have the common login module developed in Angular 1.x, we are rendering the angular module in React.

Reload AngularJS web app when file changed

I'm trying to create web using AngularJs framework, and I want to watch my changes on sass, js and html file (auto refreshing browser).
How can I do that?
You can use Yeoman generator for your Angular projects. This will provide
Provides a directory structure geared towards large Angular projects.
livereload for your project etc
cg-angular documention

Creating first angularjs SPA with VS2015

I am new to AngularJS and need some advice on how to structure a SPA with Web API for an external search application
Di I have to use
•MVC / razor views (leave all routing and rendering to Angular)? or just use 1 VS2015 app [use angularjs SPA template for VS2015 or just an empty web application with angular file and a webapi project under same solution?
any examples would be helpful to understand
For angular structure I am reading Google best practice and John Papa
Well, I think what you ran into now. I can suggest two of the ways you can choose.
If you want to keep your backend and frontend together you can go for angularjs SPA template for VS2015. It would come with the build pipelines, bundles and everything you'd need. Now you can choose to render your single page of angular to be rendered with a MVC razor view (if you want to have any mechanisms where you'd want to include your dependencies through the razor view) or just go with a blank html and web api controllers on the back. But you'd end up using one environment for all and I think that's best if you're building the full project.
Now, for the other way around, you can start with an web api project. You can instantiate your angular project with it or somewhere else. You can use yeoman or any scaffolding tool you like and use your own JS toolings you'd like to use. You can do the same in the VS project too but this approach is better if you want to keep the frontend and backend flavor separate.
And I'd suggest using typescript too.

Cordova (ionic) app - render it as demo on a website in the iframe

I'm building a mobile app using PhoneGap (Cordova) library with AngularJS and Ionic framework for UI.
I'm wondering if it's possible to render it (in a form of a demo) on the web landing-page (e.g. in an iFrame).
What would be the best approach to do it? I assume I would need some sort of a web-server... Are there any pre-built solutions?
It's just for the purpose of the demo. Doesn't have to be fully-featured.
Thanks for any suggestions.
Just put www folder to your web server and put <iframe> on your website like this to showcase your app demo:
<iframe src="http://www.example.com/myapp/" width="320" height="568"></iframe>

Resources