Теперь, когда мы создали наше самое первое выражение в 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>
Если вы откроете этот пример, то увидите поле для ввода. По мере ввода текста в поле, вы будете видеть появляющийся текст после слова 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>
В этой версии у нас есть "настоящая" HTML 5 страница, ng-app объявлен для всего html файла, и элемент input
описан более полно с помощью type и placeholder, чтобы предоставить пользователю подсказки, что ему делать
с этой формой.
