3

1 つのページで 2 つの Angular JS アプリケーションをホストするソリューションを探しています。追加の要件として、これらのアプリケーションのうち 1 つだけが実際の URL に依存するか、実際の 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 のみが影響を受けます。ユーザーが [更新] をクリックすると、app2 は「ゼロ状態」にリセットされる必要があります。#/1

私が考えることができる唯一の解決策は、 app2 のルーティングを取り除き、代わりにonclick/ng-clickをリンクに使用することです。これは汚いハックのようです。

app2 で引き続きルーティングを使用できる可能性はありますか? アイデアを思いついた場合は、問題を解決するまったく別のソリューションを知っている可能性があります。それを共有していただければ幸いです。

ありがとう！

4

1 に答える 1

1

多くの場合、同じページに複数のアプリが必要です。

これは役に立ちますか？
--> http://jsfiddle.net/2yUAD/1/ <--

基本的な考え方 (これが私がこの輝かしいフレームワークでマルチアプリを処理する方法です) は、モジュール アプリを「サブアウト」することです。私は常に「ページ」アプリを持っており、いつでもどこでも必要なときにサブアプリを初期化します。

乾杯。

于 2012-10-16T20:04:31.183 に答える