Integrate an Angular application within a div on a different domain without using an iframe

I am currently working on an angular application that has a lot of dependencies such as modules and styles.

However, I also have multiple websites where I would like to incorporate this application along with all the dependencies (similar to how it is done in an iFrame). The only difference is that I need to include the app in a div instead of an iFrame so that each website can customize the styling for the embedded application.

This will allow every site to include the app once I add it to my CORS. For example:

<div ng-include="app_from_other_domain"></div>

With all the routing functionality contained within that div.

Despite reading extensive documentation, I am unsure of where to begin with this task. Any assistance or guidance would be greatly appreciated!

javascriptangularjsiframeangularjs-directiveangularjs-ng-include

Answer №1

Have you considered encapsulating the app within its own module and developing a directive for its utilization? By doing so, you could simply import that module into your other Angular applications. This approach might offer a cleaner solution. What are your thoughts on this suggestion?

Answer №2

It is simply not achievable, as Angular JS conducts a digest cycle that encompasses the entire document, operating under the assumption of a single application existing within the document.

To facilitate app-sharing with Angular, it is advisable to organize your applications in a modular fashion. By doing so, you can easily load and integrate necessary modules from other Angular applications.

Answer №3

Here are some steps to follow:

  • Start by creating your application and associating it with a module, for example: angular.module('sub-application').controller().config();
  • Define your routes, partials, and controllers.
  • All you need is access to the main module of the application in order to inject your module name into it.
  • If you only want to run your application on a specific dive, assign the sub-application controller to that dive.
  • Alternatively, instead of using ngRoute or ui-route for states and partials, consider using jQuery to hide or switch between multiple views. You can still handle other functionalities with Angular controllers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pass the JSON object to a separate .js file in react-native without using class declarations

I am currently working on a mobile app that utilizes the fetch API to make GET calls. I've encountered an issue where I'm trying to export a JSON object fetched from the server using the fetch method to another .js file in order to use it as an a ...

javascriptjsonreact-nativefetch

Performing the $substr operation on each element within an array of strings in MongoDB

A custom aggregation has been created to search for values beginning with a specified query and prioritize exact matches in the results. The field tags is an array containing one or more strings. results = await Post.aggregate([ // Find all tags that ...

javascriptmongodbaggregation-framework

Tips for concealing ion-refresher with ng-if?

Currently, I am working on an AngularJS 1.5.3 and Ionic 1.3.5 app development project. My goal is to conceal the ion-refresher element based on a specific condition: <ion-refresher ng-if="data.state === 'main'" on-refresh="refresh()" s ...

angularjsionic-v1

When using axios to post to an API, the data being sent is showing as an empty object when logged on the server

I recently started working with nodejs and have been experimenting with sending data in a post API using axios, but I am encountering an issue where the data is not being received on the server side. Here is my current setup: CLIENT export default class A ...

javascriptnode.jsreactjsaxios

What is the best way to direct to a specific URL upon successful login?

My goal is to create a dynamic redirect feature for users after they log in. For instance, if a user types a URL like http://localhost:3000/login/tickets, the program should direct them to the login page if they are not already logged in. After logging in, ...

javascriptreactjs

Create a form in a React component that allows the user to input information

My challenge is to create a functionality where each time the add button is clicked, it should dynamically add an input field that I can save. It's similar to this example, but with inputs instead. The complexity arises from the fact that the inputs a ...

javascriptreactjsinputaddition

The variable in Angular stopped working after the addition of a dependent component

Currently, I am working with Angular and have implemented two components. The first component is a navigation bar that includes a search bar. To enable the search functionality in my second component (home), I have added the following code: HTML for the n ...

javascripthtmlangulartypescript

Updating input text value using jQuery - Chrome extension

I have been attempting to modify the input value on a specific website using a Chrome extension. To achieve this, I am utilizing jQuery in my content script. While it is effective in most scenarios, I encountered difficulty changing the input value when ...

javascriptjqueryangularjsgoogle-chromegoogle-chrome-extension

Issue encountered while deploying Next.js application on vercel using the replaceAll function

Encountering an error during deployment of a next.js app to Vercel, although local builds are functioning normally. The issue seems to be related to the [replaceAll][1] function The error message received is as follows: Error occurred prerendering page &q ...

javascriptreactjstypescriptnext.js

Implement the use of an instance method within a click event handler

I have a Todo module with a delete function. I want to utilize the delete function as an event handler for @click: <div v-for="todo in todos"> <v-btn @click="todo.delete">Delete</v-btn> </div> However, I am encountering this e ...

javascriptvue.js

Get access to environment variables dynamically using parameters

I'm currently developing a Vue plugin to retrieve the content of environment variables, similar to PHP's env() method. Background: I require a URL in multiple components and have stored it in the .env file anticipating potential future changes. H ...

javascriptvue.jsvuejs2environment-variablesjavascript-objects

What is the best method for extracting string values from a JavaScript object?

I am working with JavaScript objects that look like this: {["186,2017"]} My goal is to extract and display only the values: 186, 2017 Initially, I attempted to use JSON.stringify thinking it was a JSON: console.log(JSON.stringify(data)); However, thi ...

javascriptjqueryjson

Retrieving various sets of JSON objects arrays

I have successfully stored an array of JSON objects in the database using the following code: function send_custom_markers() { var reponse = confirm("Send markers to selected contacts?"); if (reponse === true) { var json_markers = new ...

javascriptphpajaxjsongoogle-maps-api-3

Struggling to properly reference an item within an array

Struggling to create an HTML page for a class project that utilizes a drop-down menu to display relevant information from an array? Check out my jsfiddle for the full HTML section. Any assistance would be greatly appreciated. I must admit, I'm not we ...

javascripthtmlarraysimageobject

On the hunt for a Laravel 8 application using Jetstream and Inertia within the DOM!

Hey there, I'm currently in the process of transitioning our Vuetify app to Laravel 8, Jetstream, and the inertia stack. While going through ./resources/js/app.js, I came across this line: const app = document.getElementById('app'); This c ...

javascriptlaravel-8inertiajslaravel-jetstream

Error encountered: Multer TypeError - fields does not have a function called forEach

I'm currently working on a metadata reader using multer in node.js with express on c9. I've spent some time searching for solutions to my issue, but it seems like no one else has encountered the error I am facing: TypeError: fields.forEach is no ...

javascriptnode.jsexpressuploadmulter

Discover the underlying element that is being blurred when clicked

Is there a method to determine which element triggered the blur event when clicked outside? I want to update a ui-select value to match what the user typed in if they click outside of the dropdown. However, if they click on a dropdown item, I want to disc ...

javascripthtmlangularjsui-select

How can we determine the total number of mandatory fields in an AngularJS form?

Can you explain how to calculate the number of required fields in a form using AngularJS? In my form, there are two required fields (email and select view). I want to display the count on my page - showing 2 if email is filled, 1 if only email is filled, a ...

javascriptangularjsangularjs-directiveangularjs-scopeangular-ui-router

Issue with proxy arises only when the application is loaded within an iframe

Situation I have a React application running on localhost:3000 and an express server running on localhost:5001. Additionally, my package.json includes the following: "proxy": "http://localhost:5001", Upon initial load, my React app acc ...

reactjsexpressiframereverse-proxy

Vue is removing a DOM node during the created lifecycle hook to set up a component

I am currently working on understanding the issue with this example that is not behaving as expected. My goal is to initialize my ContentView using the server-side rendered HTML in the DOM. I plan to check if init__main-content exists and then initialize t ...

javascriptvue.js