Hello world. Дата биндинг в AngularJS

Итак, сегодня мы с вами разберем как создавать Hello World на AngularJS и как использовать data-binding.

Для начала создадим файл index.html, добавим в него стандартный код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
</body>
</html>

и зайдем на сайт AngularJS для того, чтобы добавить наш скрипт. Нажимаем кнопку Download, выбираем 1.3x(latest) и добавляем URL из строки CDN.

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js

Заходим обратно в наш редактор и добавляем script, указывая в src путь к AngularJS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</body>
</html>

Для инициализации Angular приложения используется тег ng-app. Его можно вешать абсолютно на любой элемент и все, что будет находиться внутри этого тега - будет считываться Angularом.

Например, мы можем повесить его на div, или мы могли бы повесить его на html или body, или любой другой тег

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
    <div ng-app></div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</body>
</html>

Любой код, который будет находиться вне тега ng-app - считываться Angularом не будет.

Выражения и переменные в AngularJS записываются в двойных фигурных скобках - {{}}. Внутри можно написать что угодно, например, сложение переменных.

    <div ng-app>
        {{1 + 1}}
    </div>

Если мы теперь посмортрим на наш index.html в браузере, то увидим, что он вывел 2, то есть результат нашего сложения.

Или, например, конкатенацию строк. Кто не знает, то конкатенация - это объединение. Например:

    <div ng-app>
        {{"hello" + "world"}}
    </div>

Hello world тоже нормально вывелся в браузере.

Что делает AngularJS таким популярным вообще? Простота биндинга. Binding по русски означает связывание. Он осуществляется с помощью атрибута ng-model.

    <div ng-app>
        <input type="text" ng-model="hello">
        {{"hello" + "world"}}
    </div>

Внутри атрибута ng-model указывается переменная, к которой будет привязано значение. В данном случае мы используем переменную hello. Затем мы можем данную переменную вывести с помощью двойных фигурных скобок

    <div ng-app>
        <input type="text" ng-model="hello">
        {{hello}}
    </div>

Если мы посмотрим это в браузере, то увидим поле input. И если мы будем в него что-то вводить, то на экран автоматически будет выводиться переменная, в которую записалось то, что мы ввели.

Повторим еще раз: если в input мы привязываем ng-model с переменной hello, то все, что мы вводим в input - автоматически попадает в эту переменную. Если потом мы захотим данную переменную использовать, то мы можем ее, например, вывести на экран написав в двойных фигурных скобках. Это называется двухсторонний data-binding. Все, что мы вводим в input будет записываться в переменную и если наша переменная будет обновляться, то автоматически будет обновляться и значение на экране. В двойных фигурных скобках мы можем выводить не только переменную hello, но и выполнять любые другие операции, например, конкатенацию.

    <div ng-app>
        <input type="text" ng-model="hello">
        {{hello + "world"}}
    </div>

Тогда на экране мы видим значение строки, а если мы в input напишем hello или что-то другое, то нам на экран сразу же выведется то, что мы ввели, то есть наша модель + значение строки. В нашем случае hello world.

Попробуем добавить еще один input с той же моделью.

    <div ng-app>
        <input type="text" ng-model="hello">
        <input type="text" ng-model="hello">
        {{hello + "world"}}
    </div>

Если мы посмотрим в браузер, то мы увидим, что значение переменной hello автоматически обновляется во всех инпутах и на экране, где непосредствеено мы ее выводили. Как видно, если мы используем модель, то одна и таже модель внутри ng-app нам доступна сколько угодно раз и мы можем к ней привязывать сколько угодно элементов.

#1 Hello world. Дата биндинг в AngularJS