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

## 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>
	<!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>