web-dev-qa-db-ja.com

AngularJSは単一ページアプリケーション（SPA）専用ですか？

作成中のアプリケーションのフロントエンドを構築するためのオプションを検討しており、私たちのために機能し、前進するための最良のプラットフォームを提供するツールを評価しようとしています。

これは Node.js プロジェクトです。最初の計画はExpressを使用してそのルートをたどることでしたが、このステージを開始する前に、そこにあるものを確認することが最善であると判断しました。私たちのアプリケーションには、ビューの観点からではなく、アプリケーションの観点から関連しているという点で、単一ページモデルに適合しないと思われるいくつかの領域があります。

Backbone.js 、 Meteor など、AngularJSなど、クライアントを構築するために使用できるフレームワークのいくつかを見てきました。

これはかなり明白な質問かもしれませんが、AngularJSが純粋に単一ページのアプリケーション用であるか、たとえばExpressのような複数ページのアプリケーションに使用できる場合、解読できないようです。

2013年7月17日更新人々をループに留めておくために、プロセスを進めながらこの質問を更新します。私たちは今のところすべてを一緒に構築するつもりです、そしてそれがどれほどうまくいくかを見ます。私たちよりもAngularJSの資格を持っている少数の人々に手を差し伸べ、コンテキストを共有しているが単一のページで作業するのが大きすぎるかもしれない大きなアプリケーションを分割することに関して質問を投げかけました。

コンセンサスは、複数の静的ページを提供し、それらのページのみで動作するAngularJSアプリケーションを作成し、SPAのコレクションを効果的に作成し、標準リンクを使用してこれらのアプリケーションをリンクできることです。ソリューションには複数のアプリケーションがあるため、ユースケースは非常に具体的です。先に述べたように、最初に単一のコードベースを試し、そこから最適化します。

2016年6月18日更新このプロジェクトは崖から落ちたので、やり過ぎには至りませんでした。最近再び取り上げましたが、angularを使用しておらず、代わりにReactを使用しています。前回のアップデートで説明したアーキテクチャを使用しています。エクスプレスと自己包含アプリを使用しているため、たとえば、Reactチャットアプリを提供するエクスプレスに/chatルートがあり、別のルートがありますプロジェクトアプリなどを提供する/projects。私たちがちょっと見ているのは、各アプリは機能セットの観点から集約されたルートであり、それ自体がアプリと見なされるためにはスタンドアロンである必要があります。技術的には、すべての情報がそこにあり、その基本的な表現と、使用したいクライアントサイドアプリ構築の特質がすべてあります。

javascriptnode.jsangularjs
199
Modika

どういたしまして。 Angularを使用して、さまざまなアプリを構築できます。クライアント側のルーティングはそのほんの一部です。

クライアント側のルーティング以外で役立つ多くの機能のリストがあります。

  • 双方向バインディング
  • テンプレート
  • 通貨フォーマット
  • 複数形
  • 再利用可能なコントロール
  • RESTful API処理
  • AJAX処理
  • モジュール化
  • 依存性注入

そのすべてが「単一ページのアプリでしか使用できない」と考えるのはクレイジーです。もちろんそうではありません。「Jqueryはアニメーションを使用したプロジェクト専用です」と言っているようなものです。

プロジェクトに適合する場合は、それを使用します。

215
Ben Lesh

最初はAngularも「方法」に苦労しました。それからある日、それは私に「それはまだジャバスクリプトです」とわかりました。 Angular（本と一緒に私のお気に入りの1つ https://github.com/angular-appのインとアウトに多数の例があります。/angular-app ）。覚えておくべき最大のことは、他のプロジェクトと同じようにjsファイルをロードすることです。あなたがしなければならないことは、異なるページが正しいAngularオブジェクト（コントローラー、ビューなど）を参照していることを確認するだけです。これが理にかなっていることを願っていますが、答えはとても単純で見落としていました。

16
Ron

たぶん私の経験は誰かに役立つでしょう。プロジェクトを論理的に分割しました。フィードに使用するSPA、マップを操作するSPA、ユーザープロフィールを編集するSPAなど。たとえば、フィード、ユーザー、マップの3つのアプリがあります。次のように、分離したURLで使用します。

https://Host/feed/#/top/
https://Host/user/#/edit/1/
https://Host/map/favorites/#/add/

これらの各アプリケーションには、アプリケーション内の状態間の独自のローカルルーティングマッピングがあります。各アプリケーションは、独自のコンテキストと、実際に必要な負荷依存関係でのみ動作するため、良いプラクティスだと思います。また、デバッグおよび統合プロセスに非常に適しています。

実際、SPAアプリを簡単に混在させることができます。たとえば、フィードは、angularjsアプリケーションのurl、reactjsのあるユーザーアプリ、backbone.jsアプリケーションへのマップになります。

あなたの質問に答えて：

角度は、SPAだけでなく、AngularがSPAアプリケーションに適切かつ高速に動作しますが、さまざまなSPAアプリケーションのMPAアプリケーションを作成することを誰も気にしません。しかし、URLアーキテクチャについて考えると、アプリケーションのSEOの可用性を忘れないでください。

私も考えを支持します：

プロジェクトとアプリの違いは何ですか？アプリは、ウェブログシステム、公的記録のデータベース、簡単な投票アプリなど、何かを行うWebアプリケーションです。プロジェクトは、特定のWebサイトの構成とアプリのコレクションです。プロジェクトには複数のアプリを含めることができます。アプリは複数のプロジェクトに存在できます。

6
theodor

必要なのがクライアントデータバインディングのある数ページだけである場合、KnockoutとJavascript Namespacingを使用します。

ノックアウトは、特に複雑でない後方互換性が必要で、かなり単純なページを持っている場合に便利です。サードパーティのコンポーネントを使用している場合、Knockoutのカスタムバインディングは簡単で、簡単に操作できます。

Javascriptのネームスペースを使用すると、コードを分離して管理しやすくすることができます。

var myCo = myCo || {};
myCo.page = {
    init: function(){ ... },
    ...
}

そして、他のスクリプトがロードされた後のスクリプトタグで

<script>
    myCo.init();
</script>

重要なのは、必要なときに必要なツールを使用することです。データバインディングが必要ですか？ノックアウト（または好きなもの）。ルーティングが必要ですか？ sammy.js（または好きなもの）。

クライアントコードは、必要に応じて単純にも複雑にもできます。 Angularを既存の専用フレームワークを使用して非常に複雑なサイトに統合しようとしましたが、これは悪夢でした。 Angularは、新たに始めたい場合に最適ですが、学習曲線があり、非常にタイトなワークフローに縛られます。従わない場合、コードは非常に速く絡まります。

2
Fred