I have recently played with Angular and I don't know where to start with linking multiple external, html, applications into a single html document.
If this isn't clear enough let me know.
Thanks :)
Add a comment
|
2 Answers
Assuming you have already created the angular apps and that the main modules for the 2 (assuming 2) different apps are myApp1 and myApp2, the following should work:
<!-- index.html (or whatever the page is called) -->
<html>
<body>
<div ng-app="myApp1">...</div>
<div ng-app="myApp2" id="app2>...</div>
<script ...> <!-- script(s) that include the sources of the apps -->
<script>
angular.bootstrap(document.getElementById("app2"),['myApp2']);
</script>
</body>
</html>
UPDATED: The second app will have to be bootstrapped in code.
Here is a working example: http://plnkr.co/edit/eHXulGQNsvjy7WCAJwqg?p=preview
2 Comments
Joy
The second
ng-app would not be initiated.
GPicazo
@Joy Please see my update. And here is a working example: plnkr.co/edit/eHXulGQNsvjy7WCAJwqg?p=preview
One option and probably the easiest one is to use two Iframes.
You can have each app load all of its external dependencies without having to worry about conflicts.
