AngularJS チュートリアル〜W3schoolesをやってみる〜

前回まで使用していた参考書よりも、W3schoolesのチュートリアルの方がわかりやすいし、汎用的なのでそちらのチュートリアルをやることにします。

改めてやり直すハローワールド

上記のチュートリアルページでやり直します。その理由に関しては、本の内容がイマイチだったからです。概要は掴めるのですが、ng-XXXの属性に対する記載がほとんどでわかり辛いと判断しました。
というわけで、W3schoolesの方をやるのですが、初期表示時には英語なので心理的抵抗がありますが、流石W3!国際化対応済みでした。つまり日本語表示もできるということです。

上のリンクから対象のサイトに飛ぶと、下の様なヘッダーが観れます。
その右端に、の様なマークがあるのでクリックすると表示する言語を選択できるので「日本語」を選択します。

これで、学習準備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>

これをアップロードしていますのでこちらで触ることができます。

処理の内容

  1. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>;の部分でAngularJSを読み込んでいます。これがないとAngularJSは使えません。
  2. <div ng-app="">はモジュールを指定するところなのですが、使用するまでもないので空("")になっています。
  3. ng-model="name"はモデル(データを設定するオブジェクト)に「name」を指定しています。これは単純にnameという変数をモデルとして使用します。という意味です。

動かしてみる

こんな感じで動かせました。

今回はこの辺で失礼します。

でわでわ。。。