0

現在、既存の Knockout アプリケーションを Angular MEAN スタック アプリケーションに移行しようとしています。ノックアウトでは、index.html にこのコードが含まれています。

<% layout('layout') -%>

<div data-bind="ifnot: id">
    <%- partial('partials/invitation-creating.html') %>
</div>

<div data-bind="if: id">
    <%- partial('partials/invitation-done.html') %>
</div>

単一のコントローラー (または) 複数のコントローラーを使用して、Angular ルート内でロードするこの種の部分的な html ファイルをどのように実現できますか。「invitation-creating.html」ページを保存した後、「invitation-done.html」に移動できるはずですが、URL は同じである必要があります (これは必要ありません -> websiteurl/invitation_id)。

アクションhttp://invitify.azurewebsites.netで、招待状を作成すると、ブラウザで URL を変更せずに次のページ (invitation-done.html) に移動することを確認してください。これはノックアウトで達成されましたが、Angular アプリでも同じ効果を達成したいと考えています。Knockout コードは github にあり、詳しく見ることができます。https://github.com/scriptstar/KOInvitify

Angular アプリケーションでこのタイプの動作を実現するためのベスト プラクティスは何ですか。

助けてください。ありがとう。

4

1 に答える 1

6

ng-includeパーシャルと同じ動作を得るために使用できます: https://docs.angularjs.org/api/ng/directive/ngInclude

あなたの場合：

<div ng-if="!id" ng-include="'partials/invitation-creating.html'">
</div>
<div ng-if="id" ng-include="'partials/invitation-done.html'">
</div>

同様の例については、この Plunkr を参照してください: http://plnkr.co/edit/nih3JG?p=preview

ただし、Angular で推奨されるアプローチは、ディレクティブ、つまり、含める HTML を提供するだけでなく、動作 (JavaScript コード ビハインド) もバンドルするカスタム タグを定義することです。

私は個人的にいくつかの JavaScript フレームワークと HTML のパーシャル/インクルードなどを使用してきましたが、長期的には保守性の悪夢であることが判明しました。ただし、物事をすばやく完了するにはかなりうまく機能します。
その理由は、通常、インクルードされた HTML に何らかの動作をバインドしたいからです。パーシャルとして定義されているため、さまざまな場所からその HTML を使用する可能性が高いため、おそらく異なる「コントローラー」(またはフレームワーク内の同等のもの) がそれらに作用します。したがって、開発サイクルの後半で HTML に変更を加えるのは非常に困難です。

より良いアプローチは、小さな自律的なユニットを作成することです。ロジックと HTML をまとめて、アプリの他の場所からそのユニットを再利用します。最初はわずかなオーバーヘッドに思えるかもしれませんが、確実に効果があります。
(これは、現在出回っているすべての本格的な js フレームワークによって提案されているアプローチでもあります)

于 2014-11-05T10:00:56.920 に答える