作成日
最終更新
記事区分
AngularJS はクライアントサイドの JavaScript フレームワークです。Angular は「角のある」という意味の英単語であり HTML のブラケットを表現しています。また随所で見られる ng というワードは発音が angular と似ているため採用されました。AngularJS の使用方法については様々な個人ブログにまとめられてはいますが、やはり公式ドキュメントが一番よくまとまっています。必要なときに参照して利用できるように、以下に公式ドキュメントのどこに何が記載されているかをまとめます。
HTML は静的なページの構造を定義するために作られました。PHP や CGI で動的に HTML を生成することができるようになりました。Rails など各種 MVC フレームワークでよりスマートな仕組みで動的に View を生成することができるようになりました。Ajax 技術によって jQuery などで DOM を操作すれば非同期通信が可能なページも作成できるようになりました。しかしながらこれらの技術で実現された動的かつ非同期通信が可能な Web ページはデザインとロジックが混在した保守性が悪いものでした。AngularJS というクライアントサイドの JavaScript フレームワークを上記技術に追加することで JavaScript のデザインとロジックを分離でき、保守性の高い動的かつ非同期通信が可能な Web ページを作成できます。
公式ドキュメント目次
- ダウンロード (公式ドキュメントホーム)
- AngularJS の歌 (動画によるチュートリアル、合計で一時間未満です)
- アプリケーションの雛形
- トピック毎のマニュアル
- チュートリアル
- Deployment/Server-Specific/Rails
- API リファレンス (AngularJS が提供する全 ng-* の辞書的な解説)
0
記事の執筆者にステッカーを贈る
有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。
さらに詳しく →
Feedbacks
ログインするとコメントを投稿できます。
関連記事
- ルーティングを定義してシンプルな SPA を構築 (AngularJS)AngularJS は SPA (single page application) の構築をサポートしています。SPA を強制している訳ではないことに注意します。例えば SPA を構築する際に有用なモジュール ngRoute は外部モジュールとして提供されています。別途読み込みが必要です。 サンプルコード index.html <!DOCTYPE html> <html lang...
- DOM 操作ディレクティブ (AngularJS)AngularJS のビルトインディレクティブのうち DOM 操作に関するものを、コード例とともに列挙します。公式ドキュメントはこちらです。 DOM 操作ディレクティブ <!DOCTYPE html> <html lang="ja" ng-app> <head> <meta charset="utf-8"> <script type="...
- フィルター (AngularJS)AngularJS にはモデルの値を表示用に変換するフィルタという機能があります。コマンドラインにおけるパイプのように使用します。公式ドキュメントはこちらです。 フィルターの使用例 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <...
- HTTP 通信 (AngularJS)AngularJS における HTTP 通信では、XMLHttpRequest オブジェクトが利用されています。AngularJS で HTTP 通信を行うためのサンプルコードを以下に示します。公式ページはこちらです。 index.html <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <...
- サービス (AngularJS)AngularJS のビルトインサービスのうち代表的なものをコード例とともに列挙します。公式ドキュメントはこちらです。 <!DOCTYPE html> <html lang="ja" ng-app="myApp"> <head> <meta charset="utf-8"> <script src="angular.min.js">...
