AngularJS - первая связка
Теперь, когда мы создали наше самое первое выражение в 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, чтобы предоставить пользователю подсказки, что ему делать с этой формой.

Published on 2015-08-01