QA@IT

初心者です。Angular.jsの基本的な使い方について教えて下さい

4179 PV

はじめまして。プログラミングは趣味レベルでrailsを触ったことがある程度の初心者です。

Angular.jsについて教えて下さい。
javascriptのMVC(MVVM)フレームワークであることは理解しました。

しかし、調べていると、rails+angular.js, express.js+angular.jsなどのように
他のMVCと組み合わせて使っているものばかりがヒットします。

Angular自体がMVCフレームワークなのであれば、それだけ使えばいいように思うのですが、
なぜrailsと一緒に登場したりするのでしょうか。

その理由とその場合の使い分けについて、初心者でも分かるように教えていただければ嬉しいです。

回答

まず、 Angular.jsとrails, express.jsでは動作する場所が異なります。
Angular.jsはブラウザ側で動作します。 railsやexpress.jsはサーバー側で動作します。

一番単純なWebは出来上がったHTML(含む css,js)を置いておき、ブラウザがそれをサーバーからもらって表示するというものです。

これをサーバー側で動的に(必要に応じてブラウザに渡す内容を変えるという意味)HTMLなどを作成し、ブラウザがそれをもらって表示するようになりました。いわゆるWebアプリケーションです。

Webアプリケーションも複雑になり開発を便利にする様々なフレームワークが出てきました。
rails, django, express.js, ASP.NET MVCといったものです。
これらはサーバー側で動作します。
サーバーではブラウザが表示できる状態にまでHTMLなどを組み立てた上でブラウザにデータを返します。

その後 prototype.jsやjQueryなどが流行りAjaxが使われるようになると、ブラウザ側でAjaxを使ってサーバーから一部のデータだけ受け取ってブラウザでHTML組み立てやHTMLの部分書き換えを行うようになります。

さらにそれを推し進めてページの一部をjavascriptで変えるだけでアプリケーションを完結させるようなものも出てきました(Single Page Application)。
このブラウザ側でのページ作成にいろいろな機能を盛り込もうとすると、組み立て処理やサーバー(Webアプリ)からのデータ取得処理はどんどん複雑になっていきます。

このブラウザ側での組み立て処理を軽減するためのフレームワークが、Angular.js、Backbone.js、knockout.js、Ember といったjavascript フレームワークになります。
Angular.jsはテンプレート(RailsのView)とデータをサーバーから受け取って、ブラウザでテンプレートへのデータの埋め込みを行います。

(Railsでは ViewにModelのデータを埋め込むのはサーバーの仕事です。)

Angular.jsだけでもWebページは作れますが、データベースを使った処理などサーバー側の事はできません。またサーバー側の処理の複雑さも解決してくれません。

さわりとしてはこのような違いになると思います。

編集 履歴 (2)
ウォッチ

この質問への回答やコメントをメールでお知らせします。