AngularJS チュートリアル2〜ディレクティブ in W3schooles〜

今回はディレクティブについて学習します。

早い話が、htmlタグとJSをリンクします。

そして、参照するURLはこちらです。そして、サンプルコードは以下のものになります。

<!DOCTYPE html>
<html>
<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>
  <p ng-bind="name"></p>
</div>

</body>
</html>


チュートリアル1でやったものとほとんど一緒ですが、以下の部分が違います。
<今回>
<p ng-bind="name"></p>
<前回>
<input type="text" ng-model="name">
書くのが簡単になったという感じでしょうか?
ディレクティブはいろんなものがあるので今後みていきます。
作成したものは(コピペですが)こちらにあります
実行結果はこんな感じです。

Expression(式)

下の様に記載します。この"{{"と"}}"で囲って入る部分を式として実装できます。
<p>My first expression: {{ 5 + 5 }}</p>
とか<p>My first expression: {{ 'test' === 'test' }}</p>

これで、JSでいちいちgetElementById()を呼び出す処理が不要になります。

とりあえず、今回はここまでにします。

でわでわ。。。