Angular JS: 2 applications on the same page, only 1 should affect browser's location

I'm looking for a solution to host 2 Angular JS applications on a single page. The extra requirement is, only 1 of these applications should depend on/affect real URL. Here's the code:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.2/angular.min.js"></script>

    <script type="text/javascript">
        var app1 = angular.module("app1", [], function($routeProvider) {
            $routeProvider
                    .when("/1", { template: "<h1>app 1 page 1</h1>" })
                    .when("/2", { template: "<h1>app 1 page 2</h1>" })
                    .otherwise({ redirectTo: "/1" });
        });

        var app2 = angular.module("app2", [], function($routeProvider) {
            $routeProvider
                    .when("/1", { template: "<h1>app 2 page 1</h1>" })
                    .when("/2", { template: "<h1>app 2 page 2</h1>" })
                    .otherwise({ redirectTo: "/1" });
        });

        $(function() {
            angular.bootstrap($(".app1")[0], ["app1"]);
            angular.bootstrap($(".app2")[0], ["app2"]);
        });
    </script>
</head>

<body>
    <div class="app1">
        <h1>App 1</h1>
        <ul>
            <li><a href="#/1">Go 1</a></li>
            <li><a href="#/2">Go 2</a></li>
        </ul>
        <ng-view></ng-view>
    </div>

    <div class="app2">
        <h1>App 2</h1>
        <ul>
            <li><a href="#/1">Go 1</a></li>
            <li><a href="#/2">Go 2</a></li>
        </ul>
        <ng-view></ng-view>
    </div>
</body>

</html>

What I want to do is:

When user navigates to #/1 manually, the result is:

app 1 page 1
app 2 page 1

When user navigates to #/2 manually, the result is:

app 1 page 2
app 2 page 1

When user clicks links in app1, these links DO affect browser's location, these links are processed by app1, and app2 is always reset to its #/1 (so, whatever URL is, app2 should be at its own #/1).

When user clicks links in app2, this DOESN'T affect browser's location, these links are NOT processed by app1, and only app2 is affected. When user hits Refresh, app2 should be reset to its "zero state", which is #/1

The only solution I can think of is to get rid of routing in app2 and just use onclick/ng-click for links instead. This seems to be a dirty hack.

Any chance I can still use routing in app2? If you got the idea, probably you know completely different solution which solves the problem - will also appreciate if you share it.

Thanks!

There is often the need for multiple apps on the same page.

Does this help?
--> http://jsfiddle.net/2yUAD/1/ <--

Basic idea (that's how I handle multi-apps with this glorious framework) is to 'sub-out' module apps. I always have a 'Page' app and initialize sub apps whenever and wherever I need 'em.

Cheers.

来源：https://stackoverflow.com/questions/12885422/angular-js-2-applications-on-the-same-page-only-1-should-affect-browsers-loca

标签

routing

angularjs