45

私はAngularで2つの異なるアプリを持っていました。単一のアプリケーションへの統合中に、私はしなければなりませんでした

ネストng-ビュー。

サンプル（index.html）は

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li><a href="#/view1">view1</a></li>
<li><a href="#/view2">view2</a></li>
</ul>

<div ng-view></div>

<div>Angular seed app: v<span app-version></span></div>

<script src="lib/angular/angular.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
</html>

私のアプリビューの1つは（view2.html）です

<div class="ng-view"></div>
<p>This is the partial for view 1.</p>
{{ 'Current version is v%VERSION%.' | interpolate }}

これで、このアプリケーションの内部に再び異なるビューが表示されます。

試しましたが、ページが読み込まれていません。ng-viewsをネストする可能性はありますか？

不可能な場合は説明できますか

前もって感謝します

4

6 に答える 6

27

更新された回答：

UIルーター（現在ここにあります：https ：//angular-ui.github.io/ui-router/site/#/api/ui.router ）は、一般的にAngularJSの複雑なルーティングに最適なソリューションと見なされています。

元の答え：

現在のところ、AngularJSではビューをネストすることはネイティブでは不可能です。前回のアプリでは、ここから派生したソリューションを使用しました：http: //www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm

ビューを効果的にネストできるようにします（そして、制限されたng-viewを完全にスキップします）

そうすると、この他の（より単純で、より良い、私は信じる）解決策が現れました：

http://angular-ui.github.com/（「ルートチェック」までスクロールダウン）

見てみな！

于 2013-03-26T12:48:37.993 に答える
24

AngularUIチームによるui-routerプロジェクトをご覧になることをお勧めします。このプロジェクトには、状態に基づく新しいルーターが含まれています。これはURLにも反応できますが、アプリケーションの状態をより適切に処理できます。

これには、複数のビューやネストされたビューの使用が含まれます。

しばらく前に同様の質問があったので、おそらくその答えがあなたにも役立つでしょう：AngularJSでネストされたビューを設定するにはどうすればよいですか？

さらに、将来のバージョンではui-routerがAngularJSに統合されることが期待できるため、いずれにせよ、これがルーティングが機能する方法になる可能性があります。したがって、今日の次の予定をすでに把握している場合は、他の回避策に固執する必要はありません:-)

于 2013-03-26T13:40:14.127 に答える
2

これを見てください：

あなたが探しているもののように見えます

于 2013-05-20T11:49:15.200 に答える
2

ネストされたビューとルーティング用のサードパーティライブラリが多数あります。ui-routerはすでにここで言及されていますが、これも見てみることをお勧めします。

http://angular-route-segment.com

それはあなたが正確に求めるネストされたビュー機能を持っており、ui-routerよりもはるかに簡単に使用できます。あなたの例では：

index.html：

<div app-view-segment="0"></div>

view1.html：

<p>This is the partial for view 1.</p>
<div app-view-segment="1"></div>

deep-view.html：

<p>This is the partial for view inside view1.</p>
于 2013-08-15T10:12:03.487 に答える
2

問題を解決するためにさらに別のライブラリを使用したくない場合は（問題がないわけではありません）、ディレクティブとng-switchおよびng-showの使用も検討する必要があります。

このアプローチはここで答えとして与えられました：

パーシャルの角度のある複雑なネスト

于 2013-09-02T19:31:43.897 に答える
0

これが慣用的なAngularであることを心から疑っています（そして、クロスブラウザーの問題が発生する可能性があることは前述しました）がng-include、他のビューを次のようなものの中にネストした「すべて」のビューを持つための私の解決策all.html：

    <div class="all" ng-include src="'views/foo.html'" ng-controller="FooCtrl">
    </div>

    <div class="all" ng-include src="'views/bar.html'" ng-controller="BarCtrl">
    </div>

    <div class="all" ng-include src="'views/baz.html'" ng-controller="BazCtrl">
    </div>

これは私にとってはうまくいきましたが、フレームワークの粒度に反しているように感じました。私は個人的に、次のパスでEamonがリンクしているようなものを試します。

于 2013-09-02T19:52:55.707 に答える