AngularJSの基礎を理解しよう (2/5)
作成:2015-12-05 08:59
更新:2015-12-05 08:59
更新:2015-12-05 08:59
■サンプルを作ってみよう!
では、いきなりですが、さっそくAngularJSを使って簡単なものを作ってみましょう。
「え、インストールは?」と思った人。いりません。開発環境? いりません、JavaScriptですから適当にエディタで書いて下さい。動作サーバーの用意は? とりあえずいいです。HTMLファイルをそのままブラウザで開いても動きます。Ajax利用などでサーバーアクセスの必要が生じたら、その時に考えればいいでしょう。
では、下に簡単なサンプルコードを掲載しておきますので、テキストエディタ等を開いて書いて下さい。そして.html拡張子で適当な場所に保存しましょう。そしてブラウザで開いてみてください。
このサンプルでは、入力フィールドが1つだけ用意してあります。ここにテキストを書くと、リアルタイムに下のメッセージに表示がされます。ごく簡単なものですが、AngularJSの動作はなんとなくわかるでしょう。
AngularJSを使う、といっても、見てみるとJavaScriptのコードらしきものはまったくありません。実は、AngularJSの賢いところは、「JavaScriptだけ拡張するのではない」という点でしょう。AngularJSは、HTMLそのものを拡張します。では、どうなっているのか見てみましょう。
AngularJSは、一般にGoogleからロードして利用します。上記のように<script>タグを用意することで、もうAngularJSが使えるようになります。
このajax.googleapis.comというサイトは、Googleが提供するCDNのサイトです。CDNは、「Code Delivery Network」の略で、広く使われているオープンソースのJavaScriptコードを配布するサイトです。jQueryやPrototypeなど、主なオープンソースのJavaScriptライブラリは、たいていここで配布されています。指定のライブラリのアドレスをsrcに指定するだけで、いつでもそのライブラリが使えるようになります。
「え、インストールは?」と思った人。いりません。開発環境? いりません、JavaScriptですから適当にエディタで書いて下さい。動作サーバーの用意は? とりあえずいいです。HTMLファイルをそのままブラウザで開いても動きます。Ajax利用などでサーバーアクセスの必要が生じたら、その時に考えればいいでしょう。
では、下に簡単なサンプルコードを掲載しておきますので、テキストエディタ等を開いて書いて下さい。そして.html拡張子で適当な場所に保存しましょう。そしてブラウザで開いてみてください。
このサンプルでは、入力フィールドが1つだけ用意してあります。ここにテキストを書くと、リアルタイムに下のメッセージに表示がされます。ごく簡単なものですが、AngularJSの動作はなんとなくわかるでしょう。
AngularJSを使う、といっても、見てみるとJavaScriptのコードらしきものはまったくありません。実は、AngularJSの賢いところは、「JavaScriptだけ拡張するのではない」という点でしょう。AngularJSは、HTMLそのものを拡張します。では、どうなっているのか見てみましょう。
■AngularJSのロード
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
AngularJSは、一般にGoogleからロードして利用します。上記のように<script>タグを用意することで、もうAngularJSが使えるようになります。
このajax.googleapis.comというサイトは、Googleが提供するCDNのサイトです。CDNは、「Code Delivery Network」の略で、広く使われているオープンソースのJavaScriptコードを配布するサイトです。jQueryやPrototypeなど、主なオープンソースのJavaScriptライブラリは、たいていここで配布されています。指定のライブラリのアドレスをsrcに指定するだけで、いつでもそのライブラリが使えるようになります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html> <html ng-app> <head> <title>AngularJS Sample</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div> <p>input:<input type="text" ng-model="msg"></p> <p>you typed: {{msg}}.</p> </div> </body> </html>
※関連コンテンツ