前回まで使用していた参考書よりも、W3schoolesのチュートリアルの方がわかりやすいし、汎用的なのでそちらのチュートリアルをやることにします。
改めてやり直すハローワールド
上記のチュートリアルページでやり直します。その理由に関しては、本の内容がイマイチだったからです。概要は掴めるのですが、ng-XXXの属性に対する記載がほとんどでわかり辛いと判断しました。
というわけで、W3schoolesの方をやるのですが、初期表示時には英語なので心理的抵抗がありますが、流石W３！国際化対応済みでした。つまり日本語表示もできるということです。
上のリンクから対象のサイトに飛ぶと、下の様なヘッダーが観れます。
その右端に、
の様なマークがあるのでクリックすると表示する言語を選択できるので「日本語」を選択します。
これで、学習準備OK!
W3schoolesをやる
ハローワールド
早速、コードを見て観ます。コードといってもHTMLですが。。。
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>
これをアップロードしていますのでこちらで触ることができます。
処理の内容
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>;の部分でAngularJSを読み込んでいます。これがないとAngularJSは使えません。<div ng-app="">はモジュールを指定するところなのですが、使用するまでもないので空("")になっています。ng-model="name"はモデル(データを設定するオブジェクト)に「name」を指定しています。これは単純にnameという変数をモデルとして使用します。という意味です。
動かしてみる
こんな感じで動かせました。
今回はこの辺で失礼します。
でわでわ。。。
