Data Bind

input のタイプ入力と div の表示を Bind します。
タイプ入力と同時に div にメッセージが反映します。
 名前:   maeda
こんにちは、maedaさん！

次のリンクをクリックすると "ngp_bind.html" が呼び出されます。
Data Bind のプログラム

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_bind.html" です。
    <!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>

<body>
<form>
  <label for="name">名前：</label>
  <input id="name" name="name" type="text" ng-model="name" />
  <div>{{"こんにちは、" + name + "さん！"}}</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</body>
</html>
  2. html で AngularJS を使用することを宣言します。
    <html ng-app>
  3. input の ng-model で "name" を宣言します。
    宣言した "name" を div で参照します。
    form の input からタイプした文字が、１文字タイプする毎に直ちに div に反映します。
      <label for="name">名前：</label>
  <input id="name" name="name" type="text" ng-model="name" />
  <div>{{"こんにちは、" + name + "さん！"}}</div>

div を使う

  1. form に代えて div を使ってみます。
    <!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>

<body>
 <div>
  <p><input type="text" ng-model="yourName"></p>
  <p>Hello {{yourName}}!</p>
 </div>
</body>
</html>
  2. form でも div でも同じ要領です。
    *.js(JavaScript のソースファイル)は head 内で組み込む例を良く見かけます。
  3. input の ng-model で "yourName" を宣言します。
    宣言された "yourName" を {{yourName}} で参照します。
      <p><input type="text" ng-model="yourName"></p>
  <p>Hello {{yourName}}!</p>

一瞬の表示を改善

ページを起動した最初のタイミングで、{{...}}というエクスプレッション(＝式)が一瞬表示されるのを修正します。

ng-bind

div に ng-bind を使うことで、明示的にバインドすることを宣言すると {{...}} が表示されるのを防ぐことができます。
  <div ng-bind="'こんにちは、' + name + 'さん！'"></div>

ng-cloak

div に ng-cloak 属性を利用することで、処理前の {{...}} が表示されるのを防ぐことができます。
ng-cloak を使うときは <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> を head で組み込んで下さい。
  <div ng-cloak>{{"こんにちは、" + name + "さん！"}}</div>

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)