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?