How to run a multi-route angular app in a single page

Question

Imagine we have an AngularJs app (witten in multiple controllers, services, directive and run method) for multiple routes using $routeProvider. and now we need to use the same application in a single page. meaning that templates of different routes should now be visible in one page at the same time.

I can't use different iframes because then it's hard to access the $scopes of those controllers from the wrapper application.
Is this possible without the use of iframes?

Answer 1

What you are looking for is ng-include and ng-controller. Using ng-include, You can insert a html into the block containing it and using ng-controller, you can insert a controller for the same block. I would prefer not to use iframes as it is a bad practice and you will not be able to access scope and a lot of features that are native to angular.

EDIT : Since, you are using the run() function you can try the below approach :

Keeping the routeProvider same, you can move the contents of you html template files into script tags on you index.html like so :

<script type="text/ng-template" id="one.tpl.html">
 //Your html template code goes here
</script>
<script type="text/ng-template" id="two.tpl.html">
 //Your html template code goes here
</script>

In you app.js :

$routeProvider.
      when('/', {
        templateUrl: 'one.tpl.html', //points to the content of the script tag in your index.html file
        controller: 'onetplCtrl'
      }).
      when('/edit',{
        templateUrl:'two.tpl.html', //points to the content of the script tag in your index.html file
        controller:'twotplCtrl'
      }).
       otherwise({
        redirectTo: '/'
      });