More than one copy of the same 'angular app' on the page

Question

We have developed an Angular 1.0 app that we want to deploy as a 'widget' within another non-angular website (a 'classic' asp.net website).

For 'development' mode on the angular app we enjoy using the full suite of gulp tools that allow us to run karma tests, live-reload, compile css etc.

For 'deployment' mode we'd like to call the 'build-app-prod' command defined in our gulpfile.js and then copy the compiled files to a folder where they can be referenced (app.min.js, app.vendor.js and app.min.css) and then attach the app (with slightly different config) to each of a few different dom elements. These dom elements will become visible one at a time in a modal pop up when the user clicks the relevant 'edit this' button (the angular app is the editing interface).

What's the best way to do this? Include those files into the asp.net app then attach the angular app with something like this?

<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 that the right way or should we do something else?

For instance is it possible to have an 'angular loader' that lets us basically just have one js include and have that provide a method that writes out all the required dependencies and file references ?

Answer 1

You can only have one ng-app per the Angular specs. However, your goal, if I understand it correctly can be achieved via a ngModule. You can read more about it in this blog post http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/