AngularJSの基礎を理解しよう (2/5)
作成:2015-12-05 08:59
更新:2015-12-05 08:59
更新:2015-12-05 08:59
■サンプルを作ってみよう！
では、いきなりですが、さっそくAngularJSを使って簡単なものを作ってみましょう。
「え、インストールは？」と思った人。いりません。開発環境？ いりません、JavaScriptですから適当にエディタで書いて下さい。動作サーバーの用意は？ とりあえずいいです。HTMLファイルをそのままブラウザで開いても動きます。Ajax利用などでサーバーアクセスの必要が生じたら、その時に考えればいいでしょう。
では、下に簡単なサンプルコードを掲載しておきますので、テキストエディタ等を開いて書いて下さい。そして.html拡張子で適当な場所に保存しましょう。そしてブラウザで開いてみてください。
このサンプルでは、入力フィールドが１つだけ用意してあります。ここにテキストを書くと、リアルタイムに下のメッセージに表示がされます。ごく簡単なものですが、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拡張子で適当な場所に保存しましょう。そしてブラウザで開いてみてください。
このサンプルでは、入力フィールドが１つだけ用意してあります。ここにテキストを書くと、リアルタイムに下のメッセージに表示がされます。ごく簡単なものですが、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>
※関連コンテンツ