Использование 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 для хранения наших данных.
В итоге получаем примерно следующее: