Multiple instances of the identical 'Angular application' displayed simultaneously on the webpage

We've created a unique Angular 1.0 application that we aim to embed as a 'widget' within another website built with classic asp.net.

During the development phase of our angular app, we take advantage of a range of gulp tools for tasks such as running karma tests, live-reload, and css compilation.

When it comes to deploying the app, our plan is to execute the 'build-app-prod' command specified in our gulpfile.js. Once the files are compiled (app.min.js, app.vendor.js, and app.min.css), we intend to copy them to a designated folder where they can be accessed. The app will then be attached, with slight configuration variations, to different dom elements. These elements will be displayed one by one in a modal popup when users click on the corresponding 'edit this' button (the angular app serves as the editing interface).

What would be the best approach to achieve this? Should we incorporate these files into the asp.net app and link the angular app using the following code snippet:

<script src="build-app-prod-folder/app.min.js" />
<script src="build-app-prod-folder/app.vendor.js" />
<link rel="stylesheet" href="build-app-prod-folder/app.min.css">

<!-- .. -->
<div id="firstAngularAppGoeshere" 
ng-app="AngularEditApp" data-param="config1Value" />

<!-- .. -->

<div id="secondAngularAppGoeshere" 
ng-app="AngularEditApp" data-param="config2Value" />

Is this the correct route to take or should we consider an alternative method?

For example, could we implement an 'angular loader' that simplifies the process by allowing us to include just one JavaScript file which then handles all the necessary dependencies and file references automatically?

Answer №1

The Angular specifications only allow for one ng-app per application. However, your desired outcome can still be achieved by utilizing an ngModule. For further information on this topic, check out the following blog post:

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

Initiate the React application with the given external parameters

I have created a React app that is embedded within a webpage and needs to start with specific parameters obtained from the page. Currently, I am passing these parameters in the index.HTML file within a div element. The issue arises when these parameters ar ...

Ionic Vue Modal displays duplicated content

Trying to implement a modal in an Ionic Vue app, I encountered a strange issue where the content is being displayed twice. This problem persists even when using the example code provided on the Ionic website: The modal content component looks like this: & ...

Choosing different data clusters in a database

I am encountering an issue with an online quiz that generates random questions. The problem is that it tends to repeat previous questions. I have a limited set of questions - a total of 10 in my database - but I am restricting the output to just 5 random q ...

Unusual shifting movement observed in Angular UI bootstrap carousel

Currently, I am working on a project that involves incorporating a carousel to showcase various content. Instead of dynamically creating the slides using ng-repeat, I need to transfer some content from other parts of the DOM into the slide. My objective i ...

Utilizing IsBackground property with Lambda thread

Is there a way to set the IsBackground property when creating a new thread using a lambda expression? New Thread(() => { ... }) { IsBackground = true }.Start(); ...

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

Ways to incorporate design elements for transitioning focus between different elements

When focusing on an element, I am using spatialNavigation with the following code: in index.html <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfb5acf2acafbeabb6beb3f2b1bea9b6 ...

Updating an href based on the presence of a variable in the URL

I've implemented an AMP layout where a unique code is added to the URL based on the traffic source. This code is used to update phone numbers displayed on the site. For instance, if you visit https://example.com/text?bid=1234 I created a script that ...

Tips for implementing focusout on multiple elements while avoiding it when switching focus between them

Looking to create a searchable input that displays a dropdown of possible values on focusin, populated by server-side language. Attempted using focusin on elements not involved with the following code: $("body").not($(".dropdownSearch") ...

Struggling with obtaining react-modal in my React Component

Greetings to all React developers out there, especially the newbies like me. I am currently facing an issue with implementing react-modal in my React Component based on this example here. Unfortunately, I have encountered several errors that are proving di ...

Creating a JSONArray in C# and transmitting the data to an Android application can be achieved using a few simple

Within my Android application, I am utilizing an MS SQL server database. For database access, I have created a c# script that is being called from the app similar to how PHP would be used. Specifically, in my login activity, users input their Username an ...

Implementing pagination in a Node.js application using MongoDB.ORCreating

function implementPaginationForDigitalMigrationJoin(req, res, next) { DigitalMigrationForm.aggregate([ // Join with user_info table { $lookup: { from: DigitalMigrationFormList.collection.name, // other ...

What is the best way to prevent the chaining of promises and catches in JavaScript?

I am currently developing an API using node and express to create users. However, I find myself struggling with error handling due to the asynchronous nature of MongoDB functions, which makes me feel like I'm trapped in a "promise hell." I anticipate ...

Is there a smooth and effective method to implement a timeout restriction while loading a sluggish external file using JavaScript?

Incorporating content from an external PHP file on a different server using JavaScript can sometimes be problematic. There are instances where the other service may be slow to load or not load at all. Is there a method in JavaScript to attempt fetching th ...

"Troubleshooting: Angular ng-click does not display any content

A problem arises when I attempt to load a view into a div upon a click event and it is not displaying anything. The issue seems to be centered around the "SkillCtrl" controller. angular.module('myApp') .controller('SkillCtrl', function ...

Retrieve the header tag from API using Nuxt

I am trying to dynamically set OG:Tags using an API head() { this.$axios .get(`............`) .then((response) => { this.og_title = response.data.message.course.course_name; this.og_description = response.data.message.course.description; ...

When a single page loads slowly on an asp.net website, it can have a cascading effect on the performance of all

Currently, I am focused on enhancing the performance of an asp.net mvc website. This particular site serves as a members portal hosted within an Azure webapp. Upon encountering some issues during troubleshooting, I observed the following: When opening a ...

Ensure that the form is submitted when a checkbox is clicked, while also maintaining the native browser

My form contains a text input field and a checkbox. The text input must not be left empty when the form is submitted, which is why the required attribute is used. I want the form to be submitted every time the checkbox is clicked, while still maintaining ...

Leverage the Ajax response within a Jade template

I'm currently utilizing ExpressJS with the Jade template engine. My goal is to achieve the following: Within a Jade file, I need to extract a variable that will be used in a JavaScript file. This JavaScript file will then make an Ajax request to the ...

Utilizing JavaScript and jQuery libraries in conjunction with periods

I am a bit puzzled about when to include the period before referencing class names. For instance, in this code snippet, why is a period included before the first use of the 'active-slide' class but not for the other two instances? var primary = ...