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()を呼び出す処理が不要になります。

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

でわでわ。。。



投稿者:

takunoji

音響、イベント会場設営業界からIT業界へ転身。現在はJava屋としてサラリーマンをやっている。自称ガテン系プログラマー(笑) Javaプログラミングを布教したい、ラスパイとJavaの相性が良いことに気が付く。 Spring framework, Struts, Seaser, Hibernate, Playframework, JavaEE6, JavaEE7などの現場経験あり。 SQL, VBA, PL/SQL, コマンドプロント, Shellなどもやります。

コメントを残す