Двусторонний data binding в AngularJS
AngularJS

Двусторонний data binding в AngularJS

Оригинал: Understanding Two-way Data Binding in AngularJS, Tanay Pant

В этом уроке я покажу, как работает двустороннее связывание в AngularJS на примере конструктора визитных карточек. Этот конструктор позволит создавать виртуальные визитные карточки, которые можно персонализировать, указав имя, род занятий, адрес электронной почты, логотип компании, а также ссылки на домашнюю страницу и профили в социальных сетях. Также можно будет настроить фон, цвет текста, используя элементы HTML5, и сразу посмотреть все изменения на экране.

В итоге мы должны получить следующее:

Генератор визитных карточек на AngularJS

Подготовка

Мы будем использовать Bower для управлять зависимостями в проекте. Bower является менеджером пакетов, его можно установить через npm (для этого должен быть установлен Node.js). Об установке Node.js (или npm) можно почитать в статье . Подробнее об установке Bower вы можете прочитать в документации к нему .

Зависимостями в нашем проекте будут Bootstrap Framework (для стилизации), Font Awesome (для иконок), jQuery (зависимость Bootstrap) и AngularJS.

Если у вас установлен и настроен Bower, создайте новый каталог, перейдите в этот каталог и инициализируйте проект с помощью Bower:


mkdir ACG && cd ACG
bower init

В корневой директории проекта будет создан файл bower.json. Bower задаст несколько вопросов, например, название проекта, имя автора, описание и т.д. Введите название «ACG» (Angular Card Generator) и заполните остальные поля по своему усмотрению (можно оставить значения по умолчанию). В результате bower.json должен выглядеть так:


{
    name: 'ACG',
    version: '0.0.0',
    authors: [
      'Tanay Pant '
    ],
    description: 'Card Generator',
    keywords: [
      'AngularJS'
    ],
    license: 'MIT',
    ignore: [
        '**/.*',
        'node_modules',
        'bower_components',
        'test',
        'tests'
  ]
}

Далее выполните следующие команды в терминале:


bower install bootstrap --save
bower install font-awesome --save
bower install angular --save

Эти команды установят зависимости в директорию bower_components и сохранят их в bower.json. Также полезно добавить папку bower_components в .gitignore, чтобы не загружать эту папку в  репозиторий. Любой контрибьютор сможет установить зависимости, выполнив команду bower install.

Анатомия проекта AngularJS

В корневой директории проекта создайте файлы index.html и style.css. Добавьте следующий код в index.html:


<!DOCTYPE HTML>
<html lang="en" ng-app="myApp" ng-controller="BusinessCardController">
    <head>
        <title>{{ user.name }} | Business Card</title>
        <meta charset="utf-8">
        <link href="path/to/bootstrap.min.css" rel="stylesheet">
        <link href="path/to/font-awesome.min.css" rel="stylesheet">
        <link href="style.css" rel="stylesheet">
    </head>

    <body>
        <script src="path/to/jquery.min.js"></script>
        <script src="path/to/js/bootstrap.min.js"></script>
        <script src="path/to/angular.min.js"></script>
        <script>
            'use strict';

            angular.module('myApp', []).controller('BusinessCardController', function($scope) {
                $scope.user = {
                    name: 'Tanay Pant'
                }
            });
        </script>
    </body>
</html>

Мы добавили директивы ng-app="myApp" и ng-controller="BusinessCardController"; тегу <html>. Директива ng-app сообщает Angular, что вся страница является приложением AngularJS, а директива ng-controller связывает контроллер с представлением.

В title мы использовали директиву ng-bind, которая связывает заголовок страницы с моделью, а также подключили необходимые css (в <head>) и js файлы (перед закрывающимся тегом </body>). Все файлы (кроме style.css) расположены в папке bower_components.

Наконец, мы определили главный модуль приложени myApp, а также контроллер BusinessCardController, в котором инициализировали начальное состояние объекта $scope (с помощью этого объекта контроллер и представление обмениваются данными).

Аккордион, пожалуйста!

Теперь нам нужно отобразить возможные настройки. Поскольку мы подключили Bootstrap, мы можем использовать компонент accordion. Структура этого компонента следующая:


<div class="panel panel-default">
   <div class="panel-heading">
     <h4 class="panel-title">
       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
         Panel Title
       </a>
     </h4>
   </div>
   <div id="collapseOne" class="panel-collapse collapse in">
     <div class="panel-body">
       Panel content
     </div>
   </div>
</div>

Для каждой панели зададим заголовок с соответствующей иконкой:


<i class="fa fa-user fa-fw"></i>Full Name

И добавим содержимое:


Full Name: <input type="text" ng-model="user.name" placeholder="Full Name" />

Обратите внимание на директиву ng-model. Она связывает значения в полях ввода с данными приложения (в примере выше, с полем name объекта user, определенного в контроллере).

С помощью класса in мы задали активные панели по умолчанию.

Вот что мы получили. Вы можете скопировать содержимое index.html и style.css к себе в проект.

See the Pen Basic Accordion by SitePoint (@SitePoint) on CodePen.

Собираем приложение

В контроллере зададим значения по умолчанию для объекта user:


$scope.user = {
    name: 'Tanay Pant',
    designation: 'White Hat',
    email: 'tanay1337@gmail.com',
    link1: 'www.cyberwizards.org',
    tusername:'tanay1337',
    companylogo: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/logo.png',
    color1: '#c0c0c0',
    color2: 'white',
    textcolor1: '#287cc2',
    textcolor2: '#666',
    fusername:'...',
    gusername:'+TanayPant1337'
}

На эти значения (которые мы с помощью ng-model связали с полями ввода) теперь можно ссылаться в выражениях — JavaScript-сниппетах, которые как правило расположены между фигурными скобками. Это означает, что мы можем написать {{ user.name }} где угодно в теге с атрибутом ng-controller, чтобы вывести текущее значение user.name.

Мы можем использовать это для создания генератора. Добавим автоматически обновляющийся заголовок, который будет отображать значение в соответствующем поле ввода:


<h1>{{ user.name }}</h1>

Ниже показан результат второй итерации, я убрал второй аккордеон из-за ограничения пространства. Вам нужно будет обновить index.html и style.css.

See the Pen Working Demo of Card Generator by SitePoint (@SitePoint) on CodePen.


<img ng-src="{{ user.companylogo }}" class="logo">
<a ng-href="mailto:{{ user.email }}">{{ user.email }}</a>

Обратите внимание, что для логотипа мы использовали атрибут ng-src. Если использовать просто атрибут src, браузер начнет обработку URL то того, как AngilarJS подставит значение выражения. По этой же причине мы используем атрибут ng-href.

Ссылки на профили в социальных сетях

Важной частью являются ссылки на профили в социальных сетях. Мы использовали директиву ng-if (которая отображает или не отображает элементы DOM в зависимости от значения выражения) для Facebook и Google+, ссылка на профиль в Twitter обязательна. Это означает, что иконки Facebook и Google+ не будут отображаться, если пользователь не укажет соответствующие адреса профилей.


<span class="facebook" style="color:{{ user.textcolor1 }};" ng-if="user.fusername">
    <a ng-href="https://www.facebook.com/{{ user.fusername }}" title="{{ user.name }} on Facebook" >
        <i class="fa fa-facebook fa-fw"></i>
    </a>
</span>

Теперь рассмотрим случай, когда пользователь не имеет профилей ни в Facebook, ни в Google+. Это испортит наш дизайн, так как оставит пустоту после иконки Twitter. Решить эту проблему можно с помощью директивы ng-show, которая будет отображать имя пользователя в Twitter, если не заполнены адреса профилей в Facebook и Google+. Довольно просто, правда?


<span class="twitter" style="color:{{ user.textcolor1 }};">
    <a ng-href="https://www.twitter.com/{{ user.tusername }}" title="@{{ user.tusername }}">
        <i class="fa fa-twitter fa-fw"></i>
    </a>
    <span class="twitter-handle" ng-show="!user.fusername && !user.gusername">
        @{{user.tusername}}
    </span>
</span>

Заключение

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

Рассылка
Подпишитесь на рассылку и получайте дайджест новостей и статей.
Никакого спама!
Подписаться