web-dev-qa-db-ja.com

Angular 2を実行するためにHTTPサーバーが必要なのはなぜですか?

私は伝統的なバックエンドから来ましたJava/Spring学ぶための環境Angular 2 framework、そして基本的な概念の多くを理解するのに苦労しています。

私はマニングブックを読んでいますAngular 2 Development with TypeScriptと書いてあり、HTTP-serverを実行するにはSAP's。何故ですか?

Angularはクライアントマシンで実行すると思いました。それでは、サーバーの正確な機能は何ですか? HTMLを開いただけでは、Angularは魔法をかけません。

20
Tuomas Toivonen

実際、AngularアプリケーションはHTTPプロトコルを使用してアクセスすることを想定しているため、開発にはHTTPサーバーを使用することをお勧めします。「同じ条件」になります。これにより、いくつかの制限と制限があります:

  • ドメイン名に関連する絶対リンク。つまり、ドメインのルートパスからの絶対パスでリソースを参照しようとした場合です。ルートパスはファイルシステムのルートフォルダであるため、これはおそらくファイルプロトコルでは機能しません。
  • JavaScriptおよびAJAX。 JavaScriptはfile://プロトコルではうまく機能せず、ブラウザによってはセキュリティ制限が適用される場合があります。

これらの問題の詳細については、次のリンクを参照してください。

Webサーバーの選択に関して、静的WebサーバーはAngularアプリケーションに十分であり、この目的のためにいくつかの軽量HTTPサーバーがあります:

興味深い機能(lite-serverなど)は、ライブリロードにあります。サーバーは、コンテンツ(HTML、JavaScript、CSS)の更新を検出し、対応するページをブラウザーに自動的に再読み込みします。これにより、アプリケーションを実装する際の効率を高めることができます。

最後に、クライアント(Angular)側とサーバー側の両方を実装する場合、これらの部分は異なるサーバーで実行する必要があります(開発環境では、本番環境などの他の環境では異なる可能性があります)。というのは:

  • Angularアプリケーションの要素のみを提供するフロントエンドの静的HTTPサーバー。
  • サーバー側の処理を提供するバックエンド用の動的HTTPサーバー。ここで自由にテクノロジを使用できます(ノード、Javaなど)。

これらの2つのサーバーがあるため、CORS(クロスオリジンリソースシェアリング)を有効にして、AngularアプリケーションがサーバーアプリケーションでAJAXリクエストを実行できるようにする必要があります。実際、あなたは同じドメインに属していません。これは、ブラウザーがリクエストでOriginヘッダーを送信したときにCORSヘッダーを返すようにサーバー側で構成する必要があるものです。詳細については、これらのリンクを見てください:

Angularのルーティング機能を使用する場合に注意すべきもう1つの点は、HTML5履歴モードが「実際の」アドレスをシミュレートすることですが、この場合、Webサーバーに設定をロードして各ルートに対応する各URLのindex.html(エントリポイントファイル)。詳細については、この回答を参照してください: Webサイトを更新すると、404が表示されます。これは、Angular2とfirebase

考慮すべき最後のポイントは、本番環境用のアプリケーションのパッケージ化です。アプリケーションを効率的にする必要があります(要素の縮小、JavaScriptファイルの連結、テンプレートのプリロードなど)。このレベルでは、2つの別個のサーバーを保持する必要はなく、Angularパーツはサーバー側アプリケーション内にパッケージ化できます。この場合、後者はいくつかの統計ファイルを提供できる必要があります。

それがあなたを助けることを願っています、ティエリー

19

AngularJS 1.3のようなものであれば、HTMLテンプレートを取得するためにAJAXリクエストを作成します。そのためには、少なくとも実際のHTTPサーバーが必要です。

6
jameswilddev

現在AngularはデフォルトでPathLocationStrategyを使用しますが、これにはリダイレクトを行うサーバーが必要です(例 Angular 2.0ルーターがブラウザのリロードで機能しない)を参照HashLocationStrategyを使用する必要はありません。通常、ブラウザアプリケーションをHTTPサーバーからロードします。Angularを適切に構成すれば、これで実行できます。

ブラウザには、ファイルから直接読み込むときに許可される制限があるため、開発中はサーバーが必要です。

4

静的ファイルを提供するにはライトサーバーが必要です。

この背後にある理由はセキュリティです。

ブラウザは、ファイルシステムへの直接リクエストを許可しません。

2
Ali Gajani

Lite-serverがインストールされないことがわかりました。

angular-http-serverは私にとって箱から出して完璧に機能しました:

https://www.npmjs.com/package/angular-http-server

1
Sharpiro