Теперь, когда мы создали наше самое первое выражение в AngularJS, пришло время для следующего шага. Время для чего-то гораздо более интересного. Мы собираемся связать поле ввода с выражением, которое будет автоматически показывать все, что мы вводим.

Минимальный пример "Hello User"

Примеры "Hello World" обычно достаточно скучны из-за линейности. Просто показывают строку, которая является частью кода. В этом примере у нас есть элемент input, в котором мы объявили ng-model со значением name. 

<input ng-model="name">

Как только мы это сделали, то можем использовать атрибут name в выражениях Angular: {{ name }} Например:

examples/angular/minimal_hello_user.html

<script src="angular.min.js"></script>
<div ng-app>
  <input ng-model="name">
  <h1>Hello, {{name}}</h1>
</div>
Try!

Если вы откроете этот пример, то увидите поле для ввода. По мере ввода текста в поле, вы будете видеть появляющийся текст после слова Hello.

В этом примере вы видите, как связать (bind) элемент ввода и атрибут AngularJS, который затем можно использовать в выражениях.

Полный пример "Hello User"

Выше представлен самый короткий из возможных примеров использования связи (биндинга) в AngularJS. Полный пример, по крайней мере более полный, можно найти здесь:

examples/angular/hello_user.html

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title></title>
    <script src="angular.min.js"></script>
  </head>
  <body>
      <input ng-model="name" type="text" placeholder="Your name please">
      <h1>Hello, {{name}}</h1>
  </body>
</html>
Try!

В этой версии у нас есть "настоящая" HTML 5 страница, ng-app объявлен для всего html файла, и элемент input описан более полно с помощью type и placeholder, чтобы предоставить пользователю подсказки, что ему делать с этой формой.