AngularJS
JavaScript

Search for '{{search_term}}'

AngularJS - первая связка

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

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

Savenkova Natalya
Переводчик
Savenkova Natalya
Gabor Szabo
Автор
Gabor Szabo

Comments