3

我正在寻找一种在单个页面上托管 2 个 Angular JS 应用程序的解决方案。额外的要求是，这些应用程序中只有 1 个应该依赖/影响真实 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（因此，无论 URL 是什么，app2 都应该是它自己的#/1）。

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

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

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

谢谢！

4

1 回答 1

1

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

这有帮助吗？
--> http://jsfiddle.net/2yUAD/1/ <--

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

干杯。

于 2012-10-16T20:04:31.183 回答