Использование Angular для создания приложения адресной книги

Angular - это комплексная платформа для создания приложений. Он использует каналы - фрагменты кода - для сопоставления одного объекта с другим. Каналы можно использовать в шаблонах или в других частях кода.

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

Это простое приложение. У него есть домашняя страница, на которой перечислены контакты в таблице. В каждой строке есть кнопка редактирования, которая вызывает диалоговое окно, позволяющее пользователям редактировать свои контакты, и кнопка удаления, которая позволяет вам удалить контакт в текущей строке.

Чтобы начать сборку приложения, мы сначала устанавливаем Angular CLI, запустив npm i -g @angular/cli. Не забудьте включить маршрутизацию и использовать SCSS для стилизации при появлении запроса. Затем мы создаем проект, запустив ng new template-drive-form-app.

Далее мы устанавливаем некоторые библиотеки. Нам нужно хранилище потоков, чтобы упростить передачу данных, и еще одну библиотеку для проверки данных формы, которые нелегко проверить с помощью Angular. Мы используем @ngrx/store для нашего хранилища потоков и ng2-validation для добавления дополнительных возможностей проверки формы. Виджеты Angular Material делают наше приложение привлекательным. Устанавливаем их, запустив npm i @ngrx/store ng2-validation @angular/cdk @angular/material.

Теперь мы готовы создать наше приложение. Мы добавляем шаблон хранилища потоков, запустив ng add @ngrx/store. Это создает reducers folder с файлом index.ts внутри.

Затем мы создаем наши компоненты. Запускаем следующие команды:

ng g component contactDialog
ng g component contactForm
ng g component contactFormPage
ng g component homePage
ng g component topBar
ng g service contact
ng g class exports
ng g pipe searchContacts

Это создает необходимые нам компоненты и сервисы. Файл exports.ts будет содержать список наших стран.

В environment.ts мы помещаем:

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

Это позволит нам подключиться к нашему JSON Server API, что позволяет нам сохранять данные в файл JSON без создания собственной серверной части. Он доступен в виде пакета Node.js. Подробная инструкция к этому пакету находится здесь.

Сначала мы добавляем наш файл поиска для фильтрации элементов в массиве контактов. В search-contacts.pipe.ts мы помещаем:

Это ищет любое свойство в нашем массиве контактов, которое содержит ключевое слово, указанное пользователем. Если contacts является массивом, он выполняет поиск, в противном случае он возвращает объект как есть. В качестве второго аргумента используется ключевое слово поиска.

Затем в contact-dialog.component.ts, который мы должны получить, если все ng g команды выполнены, мы помещаем:

Это дает нам контакты с сервера после обновления контакта.

В contact-dialog.component.html мы помещаем:

<h2>Edit Contact</h2>
<app-contact-form [edit]='true' [contact]='contactData' (contactEdited)='getContacts()'></app-contact-form>

Мы передаем значения edit и contact в качестве входных данных для элемента app-contact-form. После обновления контакта этому компоненту отправляется событие (contactEdited), который получает контакты и обновляет хранилище.

Далее в contact-form.component.ts мы помещаем:

Здесь мы возвращаем шаблоны регулярных выражений для динамической проверки форматов телефонных и почтовых индексов. Это также позволяет нам добавлять или обновлять контакты в зависимости от того, является ли введенный ранее edit ввод истинным или нет. После сохранения контакта мы обновляем хранилище или отправляем событие contactEdited родительскому объекту, а затем обновляем хранилище контактов из серверной части.

В contact-form.component.html мы помещаем:

Это форма для проверки контактных данных. Входы range и email предоставляются ng2-validation. Атрибут required предоставляется Angular. #inputName=’ngModel’ name=’inputName’ в вашем вводе требуется для проверки. Например, при вводе номера телефона, если вы указываете #phone=’ngModel’ name=’phone’, вы можете отображать ошибки для проверки номера телефона с помощью следующего кода:

<mat-error *ngIf="phone?.invalid && (phone.dirty || phone.touched)">
  <div *ngIf="phone.errors.required">
      Phone is required.
  </div>
  <div *ngIf="phone?.invalid">
      Phone is invalid.
  </div>
</mat-error>

Мы проверяем наличие required ошибок с помощью phone.errors.required и проверяем недопустимые ошибки формата с помощью phone?.invalid. Атрибут pattern добавляется в поле формы для проверки на соответствие регулярному выражению - оно может быть динамическим или статическим. Если он статический, мы помещаем его в значение атрибута pattern dynamic, в противном случае мы можем написать функцию, возвращающую регулярное выражение, как мы это сделали.

Пакет ng2-validation работает точно так же. Мы определили #age=’ngModel’ name=’age’. Для поля возраста мы определили диапазон, который должен быть действительным, добавив [range]=”[0, 200]”, а затем аналогичным образом проверить и отобразить ошибки:

<mat-error *ngIf="age?.invalid && (age.dirty || age.touched)">
  <div *ngIf="age.errors.required">
    Age is required.
  </div>
  <div *ngIf="age?.errors?.range">
    Age is invalid.
  </div>
</mat-error>

Пакет ng2-validation предоставляет поле range объекту errors поля формы age, что упрощает проверку диапазона номеров.

В contact-form-page.component.html мы помещаем:

<h2>Add Contact</h2>
<app-contact-form></app-contact-form>

Откроется контактная форма для добавления контактов.

В home-page.component.ts мы помещаем:

Он получает данные о контакте и отображает их в таблице, позволяя пользователям щелкнуть редактировать, чтобы открыть диалоговое окно формы редактирования контакта, и щелкнуть удалить, чтобы удалить свои контакты.

В home-page.component.html мы помещаем:

Это отображает таблицу. Канал searchContacts, который мы создали ранее для фильтрации результатов, передается по ключевому слову. Мы передаем имя канала и аргументы, разделенные двоеточием, чтобы использовать канал - как в searchContacts:searchData.keyword в шаблоне выше.

Затем в home-page.component.scss мы помещаем:

th,
td {
  padding: 10px !important;
}
table.mat-table {
  width: 95vw;
}

Это добавляет некоторые отступы к нашим ячейкам таблицы и изменяет ширину таблицы.

В top-bar.component.ts у нас есть:

Это позволяет пользователям открывать и закрывать меню с помощью кнопки меню.

В top-bar.component.html у нас есть:

В top-bar.component.scss мы добавляем:

Это добавляет интервал между значком и текстом.

Затем мы создаем contacts-reducers.ts и menu-reducers.ts в папке reducers.

В contacts-reducer.ts мы помещаем:

В menu-reducer.ts мы помещаем:

В index.ts папки reducers кладем:

Эти три файла составляют наше хранилище потоков для хранения контактов и состояний меню.

В in app-routing.module.ts мы помещаем:

Это позволяет нам получать доступ к маршрутам по ссылкам и путем ввода URL-адресов в браузере.

В app.component.ts мы добавляем меню и выход маршрутизатора, который позволяет нам видеть наши страницы:

В app.component.html мы помещаем:

Чтобы отобразить те элементы, которые мы описали выше, мы добавляем это в app.component.scss:

Это добавляет некоторые отступы и устанавливает минимальную высоту страницы.

Нам нужен код для выполнения наших HTTP-запросов для получения, сохранения и удаления наших контактов. В contact.service.ts мы помещаем:

Это делает наши запросы. Эти функции используются в вышеперечисленных компонентах.

В app.module.ts мы помещаем:

Это добавляет все библиотеки и компоненты, необходимые для запуска приложения.

В styles.scss мы помещаем:

Файлы Bootstrap используются для адаптивного отображения таблицы, чего нет в Angular Material. Он был создан по адресу https://getbootstrap.com/docs/3.4/customize/ путем проверки только параметров Grid System и Table, извлечения загруженных файлов и помещения их в папку assets.

Наконец, мы запускаем npm install -g json-server, чтобы установить сервер JSON, переходим в папку нашего проекта и запускаем json-server — watch db.json, чтобы он создал файл JSON для хранения наших данных.

В итоге получаем примерно следующее: