Question

我正在寻找在单个页面上托管2个Angular JS应用程序的解决方案。额外的要求是，这些应用程序中只有一个应该依赖/影响真实的URL。这是代码：

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

我想做的是：

当用户手动导航至#/1时，结果为：

app 1 page 1
app 2 page 1

当用户手动导航至#/2时，结果为：

app 1 page 2
app 2 page 1

当用户点击app1中的链接时，这些链接会影响浏览器的位置，这些链接会由app1处理，而app2始终会重置为其#/1（因此，无论网址是什么，app2都应该位于它自己的#/1）。

当用户点击app2中的链接时，这不会影响浏览器的位置，这些链接不会被app1处理，只会影响app2。当用户点击刷新时，应将app2重置为“零状态”，即#/1

我能想到的唯一解决方案是在app2中删除路由，而只使用onclick / ng-click代替链接。这似乎是一个肮脏的黑客。

我仍然可以在app2中使用路由吗？如果你有了这个想法，可能你知道解决问题的完全不同的解决方案 - 如果你分享它也会很感激。

谢谢！

Answer 1

在同一页面上经常需要多个应用程序。

这有帮助吗？
- ＆GT; http://jsfiddle.net/2yUAD/1/＆lt; -

基本思想（这就是我如何使用这个光荣的框架处理多个应用程序）是“逐出”模块应用程序。我总是有一个“页面”应用程序并随时随地初始化子应用程序。

干杯。

Angular JS：同一页面上的2个应用程序，只有1个应该影响浏览器的位置

1 个答案: