Skip to content

Instantly share code, notes, and snippets.

@eupharis

eupharis/Have It All: A Non-Angular App, Angular App, and 2nd Angular App on the Same Page

Last active December 21, 2015 11:08
Show Gist options
  • Save eupharis/6296728 to your computer and use it in GitHub Desktop.
Save eupharis/6296728 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Have It All: A Non-Angular App, Angular App, and 2nd Angular App on the Same Page
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<script src="http://code.angularjs.org/angular.js"></script>
<body>
<div id="angular-free">
I am a completely inert {{double-curly}}. Angular can't touch this!
Free to do whatever jQuery craziness strikes your fancy.
Or hell, add a backbone app here.
</div>
<!-- don't add ng-app="angular-app" - that's what kicks off auto-bootstrapping!!! -->
</div id= "first-angular-app">
I am a the {{variable}} stored at $scope.variable in the first-angular-app.
<button id="activate-the-second-app">ACTIVATE THE SECOND APP</button>
</div>
</div id= "second-angular-app">
I am a the {{variable}} stored at $scope.variable in the second-angular-app.
I willl appear as a literal {{variable}} until the second-angular-app is loaded!
</div>
<script>
//FIRST ANGULAR APP
angular.module('first-app-optional-module-name', ['shared_filters', 'shared_services', 'first-app-optional-module-name.controllers']).
config(['$routeProvider', function($routeProvider) {
...
};
</script>
<script>
//SECOND ANGULAR APP
angular.module('second-app-optional-module-name', ['shared_filters', 'shared_services', 'second-app-optional-module-name.controllers']).
config(['$routeProvider', function($routeProvider) {
...
};
</script>
<script>
$("document").ready(function() {
angular.bootstrap("#first-angular-app", ['first-app-optional-module-name']);
$('#activate-the-second-app').click(function () {
angular.bootstrap("#second-angular-app", ['second-app-optional-module-name']);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment