今回はディレクティブについて学習します。
早い話が、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()を呼び出す処理が不要になります。
とりあえず、今回はここまでにします。
でわでわ。。。