Angularはなぜローカルで動かないのか？

初歩的な質問です。なぜ、Angularはローカルで動かないのでしょうか？

一般的なJSはjsを書いてブラウザに突っ込めば動きます。しかし、Angularはローカル開発の時点で、仮想サーバを使って開発します。

ng serviceをコマンドし、localhostで確認する流れとなっていますが、そもそもなぜ仮想サーバが必要なのでしょうか？

ご存知の方いらっしゃいましたが、よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

Angualr2 には詳しくないのですが、たぶん外部ファイルのロードなどの際に Same Origin Policy に引っかかるからではないかと思います。（外部にコンポーネントやデータソースを持たないなら動くかも）

【AngularJS のサンプルコードをローカルで弄ってたら Google Chrome だと表示されなかったりする件 - 牌語備忘録 -pygo】
http://cortyuming.hateblo.jp/entry/20120822/p1
※ Angualr1系だと思われますが、こういう問題が起こります。

【[その他] ChromeにてAjaxでローカルファイルにアクセス - Qiita】
http://qiita.com/cigalecigales/items/33afaa42f91542ffa62e

【npm iしてAngualr 2のHello World!を書くところまで【改】 - Qiita】
http://qiita.com/armorik83/items/ae737ab584012a0f5876#ビルドそして起動

この例はまだローカル経由で動きますが、RouterやAjaxなどが絡むときはローカルでサーバを立ててください。

投稿2017/04/19 18:17

kei344

総合スコア69407

kuniatsu

2017/04/23 15:28

RouterやAjaxが絡むとサーバが必要になるのですね。それはnode.jsに依存しているのでしょうか？自宅サーバでの運用を計画していたので、詳しく知りたいのですが、angularの動作サーバについての情報があまりなくて困っています。もし明るい方いらっしゃいましたらよろしくお願いします。

kei344

2017/04/23 15:45

> それはnode.jsに依存しているのでしょうか？必ずしもそうだとは思いません。angularが外部のサーバとのやり取りはHTTP通信で、送受信するのはJSONデータなので、PHPでもRubyでもバックエンドに使えるとは思います。古い例ですが、下記記事の例に挙がっているものはデータを ng.http.Request メソッドで取得しています。この場合「https://qiita.com/api/v2/items?...」の先のサーバがどのような言語でデータを返していても問題ではなく、期待したデータが返されるものなら何でも良いと思います。【意識低い系エンジニアでもできるAngular2 beta の話 - Qiita】 http://qiita.com/mikakane/items/71ace515de959b6e08fa#npm%E3%82%82%E3%83%93%E3%83%AB%E3%83%89%E3%82%82%E3%81%AA%E3%82%93%E3%81%AA%E3%82%89js%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%82%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84-%EF%BC%91%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%A7%E6%89%8B%E4%BD%9C%E3%82%8A%E3%81%AEangular2 【AngularJS: API: $http】 https://docs.angularjs.org/api/ng/service/$http AngularJS が Node.js が必須みたいになっているのは、テストの統合やTypeScriptのコンパイルに必要だから、というような気がします。

行動規範の内容に同意します

大雑把ですが

JavaScriptは２タイプ(他にもあるかも)あり
0. ブラウザのJavaScriptエンジンが実行するJavaScript

node.jsが実行するJavaScript

ブラウザで動くJavaScriptはサーバーからJavascriptファイルをダウンロードしてからブラウザのjavaScriptエンジンが実行しています。
※ブラウザのJavaScriptエンジンが共通ではないため、一部の関数でIEで動いてChromeで動かないなどが起こります

node.jsでAngularを使用した場合、jsファイルを実行した後にその結果をクライアントへ返します。
※node.jsで書いたjsファイルはブラウザエンジンでは動きません。
<script type="text/javascript" src="node.jsで書いたjsファイル" />としてもエラーになります。

個人的な考えとしてnode.jsはJavaScript言語に非常によく似たかつ拡張子が同じだがまったく別の言語と思ってます。

Angular公式サイトに「One framework.Mobile & desktop.」と書かれていますが、これはmobile=スマホ・タブレット、desktop=(デスクトップ・ノート)パソコンを指していると解釈しています。

つまり「Angularを使えばいろんな端末のブラウザ環境で動くものができますよ」と言う意味ですかね。

そしてAngularはサーバ用のフレームワークです。
なのでng serveコマンドを実行しWEBサーバを立てブラウザで確認と言う作業になります。

蛇足ですが、
インストール形式のアプリを作りたいならelectronが有名ですかね

投稿2017/04/20 01:44