В этом уроке я продемонстрирую, как двустороннее связывание данных работает в AngularJS путем создания динамического генератора визитных карточек. Этот генератор позволит вам создавать свои собственные виртуальные визитные карточки, которые вы можете персонализировать, указав свое имя, род занятий, электронную почту, логотип компании, а также ссылки на домашнюю страницу и сайты социальных сетей. Вы сможете отрегулировать как цвет фона, так и цвет текста карты, используя цветовые вводы HTML5, и увидеть все сделанные изменения на экране в режиме реального времени.
Вот чем мы закончим:
Начиная
Мы собираемся использовать Bower для управления зависимостями нашего проекта. Bower — это менеджер пакетов для Интернета, который можно установить с помощью npm (что означает, что вам нужно установить Node.js). Если вам нужна помощь в установке Node.js (или npm), ознакомьтесь с этой недавней статьей SitePoint на эту тему. Если вам нужна помощь в установке Bower, вы можете ознакомиться с инструкциями на их домашней странице.
Нашими зависимостями для этого проекта будут Bootstrap Framework (для стиля и аккордеонного компонента), Font Awesome (для иконок), а также jQuery (от которого зависит Bootstrap) и AngularJS.
Предполагая, что у вас установлен и настроен Bower, создайте новый каталог, cd в этот каталог и используйте Bower для инициализации проекта:
mkdir ACG && cd ACG bower init
Bower создаст файл bower.json в корневом каталоге вашего проекта. Он также задаст вам несколько вопросов, таких как название проекта, имя автора, описание и так далее. Под именем введите «ACG» (для генератора угловых карт) и заполните все остальное, как считаете нужным (или просто примите значения по умолчанию). Результирующий файл JSON должен выглядеть следующим образом:
{ name: 'ACG', version: '0.0.0', authors: [ ], 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 и сохранит зависимости в файл JSON . Рекомендуется добавить bower_components в .gitignore поскольку вы не хотите загружать эту папку в свой репозиторий GitHub, поскольку любой участник может установить те же зависимости, запустив bower install в корневом каталоге проекта.
Анатомия приложения AngularJS
В папке ACG создайте файл 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: } }); </script> </body> </html>
Мы запускаем веб-страницу, добавляя в тег <html> и ng-app="myApp" и ng-controller="BusinessCardController" . Директива ng-app необходима, чтобы сообщить Angular, что вся страница является приложением AngularJS, а директива ng-controller присоединяет класс контроллера к нашему представлению.
Затем мы используем директиву ng-bind в заголовке, чтобы синхронизировать заголовок страницы с нашей моделью, прежде чем включать соответствующие CSS-файлы (в <head>) и JS-файлы (до закрытия </ body). > тег). Эти файлы (кроме style.css ) находятся в папке bower_components .
Наконец, мы определяем myApp (наш основной модуль, который загружается при загрузке приложения), а также BusinessCardController в котором мы устанавливаем начальное состояние объекта $scope (метод, с помощью которого наш контроллер и представление совместно используют данные).
Аккордеоны, пожалуйста!
Теперь нам нужен способ представить параметры конфигурации пользователю. Поскольку мы используем Bootstrap, мы можем использовать компонент коллапса — базовый аккордеон. Структура гармошки следующая:
<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 . Это связывает значение элемента управления HTML с данными приложения (в этом случае атрибут name объекта user мы объявили в контроллере).
Мы также можем дать классам панелей возможность открывать их по умолчанию.
Это то, что у нас так далеко. Если вы читаете дома, скопируйте HTML-код из CodePen в index.html и CSS из CodePen в style.css .
Проводка вещей вверх
В контроллере мы можем установить некоторые разумные значения по умолчанию для нашего user объекта:
$scope.user = { name: , designation: 'White Hat', email: '[email protected]', 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 с помощью HTML и CSS из CodePen. JavaScript идет внутри нашего контроллера.
<img ng-src="{{ user.companylogo }}" class="logo"> <a ng-href="mailto:{{ user.email }}">{{ user.email }}</a>
Обратите внимание, что для логотипа карты мы используем директиву ng-src . Это потому, что если мы просто используем src , браузер начнет извлекать URL в необработанном формате, прежде чем AngularJS заменит выражение. Мы также используем ng-href по той же причине.
Социальные ссылки
Важной частью кода является кнопка социальных ссылок. Мы использовали директиву ng-if (которая удаляет или воссоздает часть дерева DOM на основе {expression} ) в столбцах имени пользователя Facebook и Google+, но не в профиле Twitter, как это требуется. Это означает, что значки Facebook и Google+ будут отображаться только в том случае, если пользователь ввел URL своего профиля.
<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>,<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+. Это испортит наш дизайн, так как оно оставляет большое пустое пространство перед значком твиттера. Мы можем решить эту проблему, используя директиву ng-show для тега span. Он отображает полный дескриптор пользователя Twitter только в том случае, если не заданы URL-адреса 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>
Вывод
Я надеюсь, что Card Generator помог вам в изучении основных концепций привязки данных в AngularJS. Вы можете найти полную демонстрацию кода на CodePen , или вы можете клонировать код для этой статьи из GitHub . Я призываю вас раскошелиться на репозиторий, поиграться с кодом и посмотреть, какие классные вещи вы можете придумать.